Question

我有2个组件，一个是父组件，另一个是子组件

在我的父组件中，我使用react-table，在内部使用某些组件，其中定义了react-table之类的

Filter: props => <FilterInnerComponent {...props} />,

问题出在我的子组件中，单击某个按钮时，我会将某些状态更改为true或false。当我的数据在我的父组件中更改时。我的子组件也重新渲染，并且子组件状态恢复为默认。

当父组件状态更改时，如何防止这种情况并使子组件的状态保持最新更改。

我正在研究并查看有关以下内容的解决方法：

shouldComponentUpdate(nextProps, nextState) {
}

但是我不知道如何使用它。我尝试过但没有帮助。

shouldComponentUpdate(nextProps, nextState) {
   return this.state.openTextBox != nextState.openTextBox
}

这是我使用onClick函数的地方，在那里我更改了子组件上的openTextBox值

changeFilterType(event) {
    if(filterType !== "All"){
        this.state.openTextBox = true
      }
      else{
        this.state.openTextBox = false
      }
 }

Answer 1

请注意，您正在比较this.state和nextState，而不是this.props和nextProps。父母不应该更改孩子的状态，道具应该更改。

您可以使用react的PureComponent或shouldComponentUpdate(nextProps, nextState)。

区别在于PureComponent对道具和状态进行了浅的比较。而shouldComponentUpdate使您可以更好地控制深道具结构的比较。

您可以将父组件声明为PureComponent。如果没有帮助，请尝试使用shouldComponentUpdate，如下所示：

shouldComponentUpdate(nextProps, nextState) {
   return this.props.openTextBox != nextProps.openTextBox
}

Answer 2

从我的代码中可以看出，您正在父组件中使用shouldComponentUpdate。

而不是我要说的，在子组件中使用它。假设您仅更改父组件中的布尔状态值，并且其他数据保持逻辑中的状态。然后，您可以使用对象比较方法在组件中的2个props实例之间进行比较，如下所示-

return this.state.openTextBox != nextState.openTextBox

如果openTextBox只是一个原始值，您还可以使用react的Pure Component。

在onclick函数中，您还需要使用类似这样的内容-

changeFilterType(event) {
 if(filterType !== "All"){
    this.setState({openTextBox: true});
  }
  else{
    this.setState({openTextBox: false});
  }
}

Answer 3

尽管可以将更改后的状态保存在子组件中，并使用它来覆盖父组件中的prop，但是请考虑让按钮触发事件处理程序，以在更高级别上更改状态，以便获得新值会作为新的prop值返回到子组件中。

当父组件更新时，React防止子组件中的更改状态

3 个答案: