setState方法中的回调函数何时执行？

Question

在以下代码中，设置状态后，setState方法的回调不会像预期的那样执行。如果你检查控制台，你会明白我的意思。console.log读取的状态不是更新的状态。它总是前一个（你可以通过点击读取数组按钮来检查这个），但是根据反应文档：

setState（）的第二个参数是一个可选的回调函数，它将在setState完成并重新呈现组件后执行。通常，我们建议对此类逻辑使用componentDidUpdate（）。

虽然我知道建议使用componentDidUpdate，但我很好奇为什么它不能按预期工作，或者我是否阅读了错误的文档。通过“一旦设置状态完成”，我理解它在新状态保存后执行。

class StateAsync extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        items: [
        { text: "JavaScript" },
        { text: "React" },
        { text: "JSFiddle" },
        { text: "Awesome" }
      ],
      selectedItems: []
    }
    
    
    this.handleSelect = this.handleSelect.bind(this);
    this.test = this.test.bind(this);
  }
  
  handleSelect(e) {

        let selectedId = this.state.items[e.target.id].text;
        let clone = [...this.state.selectedItems];
        
        if(e.target.checked == false) {
          
            console.log("Removing item.");
            clone = clone.filter(item => item !== selectedId);
            this.setState({
                selectedItems: clone
            }, console.log("Remove callback result is: " + this.state.selectedItems)); //-- the callback does not execute AFTER the state is set
                       
        }else{
        
            this.setState({
                selectedItems: [...this.state.selectedItems, selectedId]
            }, console.log("Add callback result is: " + this.state.selectedItems)); //-- callback gets executed before the state is set
            console.log("Item added.");
        }
        
    }

    test(e) {
        e.preventDefault();

        console.log(this.state.selectedItems);
    }
  
  render() {
    return (
      <div>
        <span onClick={this.test} className="d-none d-md-block"><button className="btn btn-dim btn-outline-light">Read Array</button></span>
        <ol>
        {this.state.items.map((item,index) => (
          <li key={index}>
            <label>
              <input type="checkbox" onChange={this.handleSelect} id={index}/> 
              <span>{index} - {item.text}</span>
            </label>
          </li>
        ))}
        </ol>
        <span id="readout">
          
        </span>
      </div>
      
    )
  }
}

ReactDOM.render(<StateAsync />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

这里还有一个代码：

https://codepen.io/nicholas_cb/pen/VweXoVa?editors=0010

那么，问题是setState方法中的回调是否在setState完成后执行，还是在同一时间/之前执行？

Answer 1

回调确实在状态更改后执行。

问题是您没有添加回调。

setState(updater, [callback])

this.setState(
  { selectedItems: clone },
  // closure on this.state.selectedItems
  () => console.log("Remove callback result is: " + this.state.selectedItems)
);

Answer 2

这是因为您没有将回调传递给setState（）方法，而是直接传递控制台。log（）语句。

您需要这样做：

this.setState({
     selectedItems: clone
}, () => {
     console.log("Remove callback result is: " + this.state.selectedItems
}); //-- the callback does not execute AFTER the state is set

Answer 3

您正在立即执行控制台日志，并将其返回值（未定义）作为回调传递。

这就是为什么您记录了当前状态，并且没有任何东西（未定义的作为回调）需要在更新后的状态下执行。

相反，您需要传递一个回调函数，该函数反过来调用控制台日志：

this.setState({
  selectedItems: clone
}, () => console.log("Remove callback result is: " + this.state.selectedItems));