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

Question

我不确定是否正确地将数据从子组件发送到父组件。我可以将数据获取到父级中，但是每当我在父级中设置状态时，我都会收到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，但当然它只被调用一次。如何在每次孩子更新时调用它？

无论如何，我在父级上也有一个按钮，点击后我想获得那些选定的行，因此我使用状态来保存它。

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

任何想法/帮助都将不胜感激。

谢谢。

Answer 1

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

1. 您渲染了状态为selectedRows的Parent
2. 您将该状态的setter传递给Child
3. 子级在其呈现中调用该setter
4. 这会导致父级重新提交，因为状态发生了更改
5. 父转发器触发子转发器
6. 第3部分重复
7. 第4部分重复
8. 第5部分重复
9. 第3部分重复

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

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

此外，在render内部调用任何可能触发状态更改的东西，将selectedRowsDataCallback移动到其他地方(例如componentDidUpdate(，这是一种非常糟糕的做法。