警告：setState(...)：在现有状态转换期间无法更新

Question

我正在开发一个简单的“待办事项”反应应用程序（React.js 的新功能）。我已将项目添加到列表中，但删除项目会引发问题。在我的父反应组件中，我有以下代码：

import ToDoEntries from './to_do_entries.jsx';

class ToDoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { list: [] }
    this.add = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }

  addItem(e) { //removed to avoid tl:dr }

  render() {
    return(
      <form onSubmit={this.add}>
        <input placeholder='Enter item' type='text' ref={(el) => {this._input = el;} }/>
        <button>Add</button>
      </form>

      <ToDoEntries entries={this.state.list}
        removeCallback={this.removeItem}
      />
    );
  }

}

我的to_do_entries.jsx 组件：

class ToDoEntries extends React.Component {
  constructor(props) {
    super(props);
  }

  renderItems() {
    const { entries, removeCallback } = this.props;

    function createTasks(item) {
      return <li key={item.key}>{item.text}</li>
    }

    var listItems = entries.map(function(item) {
      return(<li onClick={removeCallback} key={item.key}>{item.text}</li>)
    })

    return listItems;
  }

  render() {
    var todoEntries = this.renderItems();

    return(
      <ul>
        {todoEntries}
      </ul>
    );
  }
}

export default ToDoEntries;

运行这段代码带来：

警告：setState(…)：在现有状态期间无法更新 过渡

问题：

为什么to_do_entries.jsx的渲染在添加项目时立即执行回调，即：

var listItems = entries.map(function(item) {
  return(<li onClick={removeCallback(id)} key={item.key}>{item.text}</li>)
})

但是，将.bind(null, id) 添加到 removeCallback 即。 <li onClick={removeCallback.bind(null, id)} /> 没有？

Answer 1

问题出在这部分：

onClick={removeCallback(id)}

我们需要向 onClick 传递一个函数，而不是值。当我们将() 与functionName 一起使用时，这意味着您正在调用该方法并将其结果分配给onClick，如果您在removeCallback 中执行setState，这将创建一个无限循环，因为这个周期：

render ->  removeCallback()  ->  setState ->
  ^                                         |
  |                                         |
  |                                         |
   -----------------------------------------

这就是您收到错误的原因。

检查 sn-p 以了解abc and abc() 之间的差异：

function abc(){
   return 'Hello';
}

console.log('without () = ', abc);     //will return the function
 
console.log('with () = ', abc());      //will return the function result (value)

为什么要使用onClick={removeCallback.bind(null, id)}？

因为 bind 会创建一个新函数，并将该函数分配给点击事件，所以这里removeCallback 将在您点击任何项目时被调用，而不是自动调用。

根据MDN Doc：

bind() 函数创建一个新的绑定函数 (BF)。 BF 是一个 外来函数对象（ECMAScript 2015 中的一个术语）包装了 原始函数对象。调用 BF 通常会导致 执行其包装函数。

检查React DOC: Handling events in JSX。

查看此答案以了解有关绑定的更多详细信息：Use of the JavaScript 'bind' method

Answer 2

我建议不要这样做，并使用与我为您编写的示例类似的方法。渲染绑定到状态的待办事项列表，然后将相关信息传递回您的父组件以删除该项目。在这种情况下，我使用 todo 的索引来拼接数组，以便将其删除。

当每个 todo <li> 被渲染时，您当前的 onClick 会立即被调用，因为它只是一个导致问题的函数调用。 .bind 解决了这个问题，因为它会在您单击元素时创建一个新函数，这就是该函数不会立即调用的原因。

但是，这通常被认为是不好的做法，因为每次组件都会一次又一次地创建此函数。将其乘以屏幕上待办事项的数量，您将失去性能。这是一个小问题，但我的示例显示了如何解决这个问题。 https://codepen.io/w7sang/pen/VWNLJp

// App
class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = { list: [] }
    this.add = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }
  addItem(e) { 
    e.preventDefault();
    this.setState({
      list: [ 
        ...this.state.list, 
        {
          key: Math.random(1,10000),
          text: this._input.value
        }
      ]
    })
  }
  removeItem(payload){
    this.setState({
      list: [ 
        ...this.state.list.slice(0, payload.index),
        ...this.state.list.slice(payload.index + 1)
      ]
    })
  }
  render() {
    return(
      <div>
        <form onSubmit={this.add}>
          <input placeholder='Enter item' type='text' ref={(el) => {this._input = el;} }/>
          <button>Add</button>
        </form>
        <ToDoEntries entries={this.state.list} removeItem={this.removeItem} />
      </div>
    );
  }
}

// TodoEntries [STATELESS]
const ToDoEntries = ({ entries, removeItem } ) => {
  return(
    <ul>
      { entries.map((item, index) => {
        return(<Todo key={item.key} index={index} item={item} removeItem={removeItem} />)
      }) }
    </ul>
  );
}

// Todo
class Todo extends React.Component {
  constructor(props){
    super(props);
    this.state = {};
    this.remove = this.remove.bind(this);
  }
  remove() {
    const { index, removeItem } = this.props;
    removeItem({
      index
    });
  }
  render() {
    return <li onClick={this.remove}>{this.props.item.text}</li>
  }
}

ReactDOM.render(<App />,document.getElementById('app'));

<div id="app"></div>

Answer 3

为什么 to_do_entries.jsx 的 render 会立即执行回调？

好吧，当您映射到待办事项列表时，每个 <li/> 都在调用 removeCallback 函数，而不是将其分配给 onClick。

所以当前代码

<li onClick={removeCallback(id)} </li>

相当于：

var result = removeCallback(id);
<li onClick={result} </li>

您已经正确指出使用bind 会起作用。这是由于它在这些情况下如此有用的行为。

See the mdn docs for more info，但我会在这里引用重要的部分：

bind ... 创建并返回一个新函数，调用时...

在您的情况下，当使用绑定并将其提供给 onClick 时，您正在创建一个新函数，该函数将在实际触发 click 事件时调用，而不是在呈现元素时调用。

查看removeCallback.bind(null, id) 的另一种方式是这样的：

var newFunc = () => {
  return removeCallback(id);
}
<li onClick={newFunc} </li>