第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在 React 中使用自定義鉤子獲取多個(gè)表中的數(shù)據(jù)時(shí),自定義 ContextProvider

在 React 中使用自定義鉤子獲取多個(gè)表中的數(shù)據(jù)時(shí),自定義 ContextProvider

慕萊塢森 2023-08-18 17:38:26
我有多個(gè)小表,當(dāng)應(yīng)用程序更新相應(yīng)的表時(shí),我希望能夠?qū)懭?讀取/更新我的組件(我們暫時(shí)可以認(rèn)為它是一個(gè)單用戶應(yīng)用程序)。我受到這個(gè)問題的啟發(fā),在我的應(yīng)用程序中編寫了一個(gè)自定義提供程序和關(guān)聯(lián)的用于數(shù)據(jù)獲取(并最終發(fā)布)的鉤子:React useReducer async data fetch我想出了這個(gè):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>? ? </>? );}(代碼應(yīng)該在 CRA 上下文中運(yùn)行,兩個(gè) API 都可以替換為幾乎任何 API)當(dāng)我運(yùn)行它時(shí),會(huì)在兩個(gè)端點(diǎn)(/api/capteur 和 /api/observation)上觸發(fā)請(qǐng)求,但我期望 MetadataContextProvider 中的元數(shù)據(jù)對(duì)象有 2 個(gè)鍵:&ldquo;/api/capteur&rdquo;和&ldquo;/ api/observation&rdquo;,只顯示最后一次請(qǐng)求的內(nèi)容。當(dāng)我在 loadMetadata 函數(shù)中 console.log 元數(shù)據(jù)時(shí),元數(shù)據(jù)始終具有初始狀態(tài)掛鉤值,即 {}。我對(duì) React 還很陌生,我努力嘗試過,但我真的不明白這里發(fā)生了什么。有人可以幫忙嗎?
查看完整描述

1 回答

?
一只萌萌小番薯

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊

您的問題是如何使用 更新metadata對(duì)象setMetadata。metadata在您的上下文中通過更新對(duì)象的操作loadMetadata分別由兩個(gè)“實(shí)例”完成:TestComponent#1 和TestComponent#2。它們都可以訪問metadata上下文中的對(duì)象,但它們不會(huì)立即同步,因?yàn)?code>useState的 setter 函數(shù)是異步工作的。

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

在您的上下文提供者中:

async function loadMetadata(url) {

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

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

? // instead of

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

}

查看完整回答
反對(duì) 回復(fù) 2023-08-18
  • 1 回答
  • 0 關(guān)注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)