ReactJS中代码延迟执行问题：setTimeout无法生效

嘿，我一眼就瞅出问题所在啦！你这段代码里的setTimeout回调函数里的this指向不对，根本不是你的React组件实例，所以this.setState自然就没效果咯～

你在setTimeout里用了普通的function作为回调，这种函数里的this会指向全局对象（浏览器环境下是window），而不是你的React组件实例，所以调用this.setState的时候就找不到这个方法，自然无法更新状态。

• 方案1：使用箭头函数（最推荐，写法最简洁）
  箭头函数会继承外层作用域的this，也就是你的组件实例，这样就能正常调用setState了：

updateDisplay = arr => {
  setTimeout(() => {
    this.setState({ sortArray: arr });
  }, 500);
};

• 方案2：提前把组件的this存到变量里
  在setTimeout外面先把组件的this保存到一个变量（比如self或者that），回调里直接用这个变量就行：

updateDisplay = arr => {
  const self = this;
  setTimeout(function () {
    self.setState({ sortArray: arr });
  }, 500);
};

• 方案3：用bind绑定this到回调函数
  给回调函数调用bind(this)，把它的this强制绑定到组件实例上：

updateDisplay = arr => {
  setTimeout(function () {
    this.setState({ sortArray: arr });
  }.bind(this), 500);
};

看你的代码写法应该是React类组件，上面三个方案都能完美解决问题。要是你用的是函数组件，那得换useState+useEffect配合setTimeout的写法，但目前这个场景下，上面的方案就足够啦～

内容的提问来源于stack exchange，提问作者Golden