时间戳

首页 > 解决方案 > React - 从子级到父级的数据 - 设置状态的问题

reactjs - React - 从子级到父级的数据 - 设置状态的问题

问题描述

我不确定我是否正确地将数据从子组件发送到父组件。我能够将数据导入父级，但是每当我在父级中设置状态时，都会出现Maximum update depth exceeded.错误。

我出错的任何想法（React 新手）：

子组件

所以在我的子组件道具中 - 我添加了回调函数：

selectedRowsDataCallback?: (selectedRows: string[]) => void;

然后稍后在那个子组件中 - 在它的渲染中，我为它设置了一些值selectedRowsDataCallback(someOfMyData);

父组件

在父组件中 - 我有：

const [selectedRows, setSelectedRows] = React.useState([]);

子组件大致如下所示：

<ChildComponent
   selectedRowsDataCallback={SelectedRowsCallback}
/>

还有那个回调：

function SelectedRowsCallback(childData: string[]) {
   React.useEffect(() => {
    setSelectedRows(childData);
   }, [])
}

它在这一点上得到Maximum update depth exceeded.（当然做了一个console.log，我看到了数据）。

所以我添加了useEffect，带有[]deps，但当然它只被调用一次。每次孩子更新时如何调用它？

无论如何，我在父级上也有一个按钮，单击该按钮我想获取那些 selectedRows 因此我使用状态来保存它。

function someButtonAction() {
   // Get from props and do something 
   console.log(selectedRows);
}

任何想法/帮助表示赞赏。

谢谢。

标签： reactjstypescript

解决方案

不要调用在渲染中设置状态的方法。如果我理解正确，您正在做的是：

  1. 你渲染你的 Parent ，它的状态是 selectedRows
  2. 您将该状态的设置器传递给孩子
  3. 孩子在其渲染中调用该设置器
  4. 这会导致父级重新渲染，因为状态发生了变化
  5. 父重新渲染触发子重新渲染
  6. 第 3 部分重复
  7. 第 4 部分重复
  8. 第 5 部分重复
  9. 第 3 部分重复
  10. ...

在内部SelectedRowsCallback，您应该在调用之前检查它的值selectedRows是否已更改setSelectedRows。那应该可以解决这个问题。

但是，请注意，整个函数有点不必要，因为您每次都在创建一个新效果，setSelectedRows而这已经是您所需要的（+ 您应该将所有外部变量传递给 的第二个参数useEffect）

此外，调用任何可能触发渲染内部状态变化的东西，将其移动到selectedRowsDataCallback其他地方是一种非常糟糕的做法 - 例如componentDidUpdate.

推荐阅读