React JS:在 API 调用上取得成功后获取上下文数据

Question

我无法获取上下文数据。

我有一个上下文和一个使用它数据的组件。

我需要在我的组件中获取有关 API 调用成功的上下文变量的更新数据。

那么我该怎么做呢？ 这是我尝试过的。

上下文.js

import React, { useState, createContext,useEffect } from 'react';
import {getData} from './actionMethods';
const NewContext = createContext();
function newContextProvider(props) {
const [dataValue, setData] = useState([])
useEffect(() => {
const fetchMyData = async () => {
const dataValue  = await getData(); // this is an API call
setData(dataValue)
};
fetchMyData();
}, []);

return (
<NewContext.Provider
value={{
state: {
dataValue
},
actions: {
}
}}
>
{props.children}
</NewContext.Provider>
);
}
const newContextConsumer = newContext.Consumer;
export { newContextProvider, newContextConsumer, newGridContext };

我的组件.js

import React, { useState, useContext } from 'react'
import context from './context'
import deleteAPI from './actionMethods'
function myComponent(props) {
const id= 10
const {state,actions} = useContext(context)

deleteAPI(id).then(res => {
if (res){
// what should I write here to get the updated Data from the context which will call an API to get the updated data.    
}
})


}

任何帮助都会很棒。

谢谢。

Answer 1

作为一般示例，一种选择是在前端加载应用时从服务器获取数据。从那里，您可以发送修改服务器数据的请求，同时更新本地版本。像这样：

1. 获取数据并将其保存到本地存储：[{id: 0, name: 'first'},{id: 1, name: 'second'}]
2. 修改向服务器发送请求的数据。例如，删除项目。id: 0
3. 服务器响应确认操作成功后，您可以在本地存储中修改该数据。[{id: 1, name: 'second'}]

您可以使用 Redux 存储或 React 上下文来处理数据。例如，使用上下文：

export const ItemsContext = createContext([]);
export const ItemsContextProvider = props => {
const [items, setItems] = useState([]);
const deleteItem = id => {
deleteItemsAxios(id).then(() => {
setItems(items => items.filter(item => item.id !== id));
});
};
useEffect(() => {
const fetchItems = async () => {
const items_fetched = await fetchItemsAxios();
if (items_fetched) {
setItems(items_fetched);
} else {
// Something went wrong
}
};
fetchItems();
}, []);
return (
<ItemsContext.Provider
value={{
items,
deleteItem
}}
>
{props.children}
</ItemsContext.Provider>
);
};

我们定义了一个将管理数据获取的组件。数据项位于状态内。当组件挂载时，我们获取项目并将它们保存在状态中。如果我们想删除一个项目，我们首先调用相应的 fetch 函数。完成后，如果成功，我们将更新状态并删除该项目。我们使用 React Context 将items数据以及deleteItem函数传递给任何需要它们的组件。

如果您需要更多解释，请告诉我。