将数据从子级传递给父级时如何避免 setState() / render() 无限循环？

Question

我试图将子数据保存为父状态，但由于setState() 调用render() 而导致无限循环。

错误消息： 超出最大更新深度。当组件在componentWillUpdate 或componentDidUpdate 内重复调用setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

对 React 来说相对较新，所以在谷歌搜索解决方案时我似乎无法说出这个问题。我知道为什么会发生错误，我只是不知道如何解决这个问题。有没有我可以使用的特定方法来防止重新渲染？

这里是父级：

export class ToDoList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data: null
    }
  }

  myCallback = (dataFromChild) => {
    this.setState({data: dataFromChild.toUpperCase()})
  }

  render() {
    return (
      <div>
        <ToDoItem callbackFromParent={this.myCallback}/>
      </div>
    );
  }
}

孩子：

class ToDoItem extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      listInfo: 'Doggos'
    }
  }

  render(){
    return(
      <h1>{this.props.callbackFromParent(this.state.listInfo)}</h1>
    );
  }
}

Answer 1

您的代码正是这样做的，一个无限循环。当你的ToDoItem 组件渲染时，它会调用callbackFromParent 更新ToDoList 的状态，导致ToDoList 重新渲染，随后重新渲染ToDoItem。由于ToDoItem 重新渲染，它再次调用callbackFromParent 等等......

我想问你为什么要渲染callbackFromParent 的非返回值函数。它不返回任何东西，所以你为什么要在 <h1> 标签中呈现它是没有意义的。

Answer 2

您共享的代码存在一个小问题，即您正在从 render() 调用一个函数，而不是将其绑定到某个使其进入无限循环的事件...

Answer 3

这是你想要达到的目标吗？

class ToDoList extends React.Component {

  toUpper = (dataFromChild) => {
    return dataFromChild.toUpperCase();
  }

  render() {
    return (
      <div>
        <ToDoItem toUpper={this.toUpper}/>
      </div>
    );
  }
}

class ToDoItem extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      listInfo: 'Doggos'
    }
  }

  render(){
    return(
      <h1>{this.props.toUpper(this.state.listInfo)}</h1>
    );
  }
}

ReactDOM.render(<ToDoList />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

由于以下原因，您会陷入无限循环：

1) 您在每次渲染时调用父回调。

2) 您将大写的值保存在父状态中。

当父状态更新时，子状态会重新渲染，这意味着它会再次调用回调，这将导致重新渲染，再次调用回调等等......

另一种解决方案是将 util 函数传递给子级，然后在重新渲染时调用它一次。由于父级中没有状态被更新，因此子级不会被重新渲染。

Answer 4

如果您尝试将数据保存在父级上但想在子级中显示，请尝试以下操作：

这是父级：

export class ToDoList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      data: null
    }
  }

  myCallback = (dataFromChild) => {
    this.setState({data: dataFromChild})
  }

  render() {
    return (
      <div>
        <ToDoItem callbackFromParent={this.myCallback} data={this.state.data}/>
      </div>
    );
  }
}

孩子：

class ToDoItem extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      times: 0
    }
    // Bind Explained below
    this.iBeClicked = this.iBeClicked.bind(this);
  }

  iBeClicked(){
    this.setState({times: ++this.props.data});
    this.props.callbackFromParent(this.props.data++);
  }

  render(){
    return(
      <div className="wrap">
        <h1 onClick="iBeClicked">{this.props.data !== null ? this.props.data: 'Nothing' }</h1>
      </div>
    );
  }
}

您使用 this.method.bind(this) 来将组件的 this 绑定到 React 回调在渲染中的执行。