亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 React 中使用自定義鉤子獲取多個表中的數據時,自定義 ContextProvider

在 React 中使用自定義鉤子獲取多個表中的數據時,自定義 ContextProvider

慕萊塢森 2023-08-18 17:38:26
我有多個小表,當應用程序更新相應的表時,我希望能夠寫入/讀取/更新我的組件(我們暫時可以認為它是一個單用戶應用程序)。我受到這個問題的啟發,在我的應用程序中編寫了一個自定義提供程序和關聯的用于數據獲?。ú⒆罱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 個鍵:&ldquo;/api/capteur&rdquo;和&ldquo;/ api/observation&rdquo;,只顯示最后一次請求的內容。當我在 loadMetadata 函數中 console.log 元數據時,元數據始終具有初始狀態掛鉤值,即 {}。我對 React 還很陌生,我努力嘗試過,但我真的不明白這里發生了什么。有人可以幫忙嗎?
查看完整描述

1 回答

?
一只萌萌小番薯

TA貢獻1795條經驗 獲得超7個贊

您的問題是如何使用 更新metadata對象setMetadatametadata在您的上下文中通過更新對象的操作loadMetadata分別由兩個“實例”完成:TestComponent#1 和TestComponent#2。它們都可以訪問metadata上下文中的對象,但它們不會立即同步,因為useState的 setter 函數是異步工作的。

解決您的問題的簡單方法稱為功能更新。?useState的 setter 還提供了一個回調函數,它將使用(我在這里過于簡單化)“最新”狀態。

在您的上下文提供者中:

async function loadMetadata(url) {

? let response = await axios.get(url);

? setMetadata((existingData) => ({ ...existingData, [url]: response.data }));

? // instead of

? // setMetadata({ ...metadata, [url]: response.data });

}

查看完整回答
反對 回復 2023-08-18
  • 1 回答
  • 0 關注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號