Question

我有3个组成部分：

树
TreeView
TreeNode

在树中-我通过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>
  );
};

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

1 个答案: