javascript - 从父 React 刷新子状态

Question

我有一个包含一些数据的表格，表格中的每个元素都是一个 React 类组件。它看起来像这样:

我想要的只是有一个用于“选中所有”功能的复选框(左上角的复选框)。问题是我不知道如何解决这个问题，因为 props 和 state。

我在单元素组件中有这样的代码:

getInitialState: function() {
    return { component: this.props.data };
  },

render: function() {
    var data = this.state.component;
    data = data.set('checked', this.props.data.get('checked'));
    ...
}

我知道我不应该从 props 得到 checked 参数，但这只是暂时的。

我遇到的问题是:当我更新父级中的 checked 参数时，它不会更新状态，因为刷新后不会调用 getInitialState(是的，我知道它应该是那样的)。

我的问题是:我能以某种方式更新子组件的状态吗？或者这是更好的实现方式。

Answer 1

具有功能组件: 当父级提供的 props 发生变化时，刷新子级内部状态的一种简单方法是通过 useEffect():

在 children 身上:

const [data, setData] = useState(props.data);

useEffect( () => {
    setData(props.data);
}, [props.data]); 

以这种方式，每次 props.data 更改时，都会触发 useEffect 并强制为某些数据设置新状态，因此组件会“刷新”。