我有多個小表,當應用程序更新相應的表時,我希望能夠寫入/讀取/更新我的組件(我們暫時可以認為它是一個單用戶應用程序)。我受到這個問題的啟發,在我的應用程序中編寫了一個自定義提供程序和關聯的用于數據獲?。ú⒆罱K發布)的鉤子:React useReducer async data fetch我想出了這個:import React from "react";import { useContext, useState, useEffect } from "react";import axios from "axios";const MetadataContext = React.createContext();function MetadataContextProvider(props) {? let [metadata, setMetadata] = useState({});? async function loadMetadata(url) {? ? let response = await axios.get(url);? ? // here when I console.log the value of metadata I get {} all the time? ? setMetadata({ ...metadata, [url]: response.data });? }? async function postNewItem(url, payload) {? ? await axios.post(url, payload);? ? let response = await axios.get(url);? ? setMetadata({ ...metadata, [url]: response.data });? }? return (? ? <MetadataContext.Provider value={{ metadata, loadMetadata, postNewItem }}>? ? ? {props.children}? ? </MetadataContext.Provider>? );}function useMetadataTable(url) {? // this hook's goal is to allow loading data in the context provider? // when required by some component? const context = useContext(MetadataContext);? useEffect(() => {? ? context.loadMetadata(url);? }, []);? return [? ? context.metadata[url],? ? () => context.loadMetadata(url),? ? (payload) => context.postNewItem(url, payload),? ];}function TestComponent({ url }) {? const [metadata, loadMetadata, postNewItem] = useMetadataTable(url);? // not using loadMetadata and postNewItem here? return (? ? <>? ? ? <p> {JSON.stringify(metadata)} </p>? ? </>? );}(代碼應該在 CRA 上下文中運行,兩個 API 都可以替換為幾乎任何 API)當我運行它時,會在兩個端點(/api/capteur 和 /api/observation)上觸發請求,但我期望 MetadataContextProvider 中的元數據對象有 2 個鍵:“/api/capteur”和“/ api/observation”,只顯示最后一次請求的內容。當我在 loadMetadata 函數中 console.log 元數據時,元數據始終具有初始狀態掛鉤值,即 {}。我對 React 還很陌生,我努力嘗試過,但我真的不明白這里發生了什么。有人可以幫忙嗎?
在 React 中使用自定義鉤子獲取多個表中的數據時,自定義 ContextProvider
慕萊塢森
2023-08-18 17:38:26