反应，添加项目时从 api 重新获取

Question

>我有 3 个组件：

1. 树
2. 树视图
3. 树节点

在树中 - 我通过UseEffect从api获取数据并将其发送到TreeView 在 TreeView 中 - 我基于 jsx 中的数据递归构建一棵树，并将每个项目发送到 TreeNode 在 TreeNode 中 - 我可以编辑节点并发送 http 请求来更改它

问题是，在我刷新页面之前，更改不会显示。 有什么方法可以在成功编辑后调用父组件以重新呈现其子组件而无需刷新页面？

Answer 1

你应该把数据的获取函数传递给子级。有一个例子

const Tree = props => {
const [items, setItems] = useState(defaultState);
const fetchData = () => {
fakeApiFetch().then(data => setItems(data));
};
useEffect(() => {
fetchData();
}, []);
return (
<TreeView>
{items.map(item => (
<TreeNode {...item} key={item.id} fetchData={fetchData}>
//update item => then call props.fetchData
</TreeNode>
))}
</TreeView>
);
};