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

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和[] dep，但是当然只能调用一次。每次孩子更新时我怎么称呼它？

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

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

感谢任何想法/帮助。

谢谢。

Answer 1

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

1. 您呈现状态为selectRows的父项
2. 您将该状态的设置者传递给了孩子
3. 孩子在渲染器中调用该setter
4. 这会导致父母因为状态改变而重新提交
5. 父级重新提交会触发子级重新提交
6. 第3部分重复出现
7. 第4部分重复出现
8. 第5部分重复出现
9. 第3部分重复出现
10. ...

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

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

此外，调用可能触发渲染状态改变的任何东西，将selectedRowsDataCallback移动到其他地方（例如， componentDidUpdate。