我收到 this.setState is not a function inside

Question

我看过一些关于“this.setState 不是函数”问题的主题，但没有一个主题为我解决了这个问题。我使用了箭头函数或绑定“this”，但仍然收到错误。初步尝试如下。它使用嵌套的 setTimeout 函数（我可以解释为什么它会有所帮助），但问题是围绕 this.setState 的。

在不研究“useEffect”Hook 的情况下，我可以检查下面的代码中是否缺少在 React 中设置状态的基本/基础内容吗？

let delay = 5000;

      var startTime = new Date().getTime();

      let intervalTimerId = setTimeout(function request() {

        // first apply a random number to a div

        let randomNum = Math.floor(Math.random() * 6) + 1;

        // document.querySelectorAll(".someClass"+randomNum)[0].setAttribute("id", "test");

        // then after a second, remove the class

        setTimeout(() => {

          // document.querySelectorAll(".someClass"+randomNum)[0].setAttribute("id", "");

          // after another second, set state to use later

          setTimeout(() => {

            this.setState({someState: "testing"});

          }, 1000)

        }, 1000)

        // set new delay time

        if (new Date().getTime() - startTime > 9000) {

          delay = 3000;

        }

        console.log(new Date().getTime() - startTime)

        intervalTimerId = setTimeout(request, delay);

      }, delay);

Answer 1

您可以尝试使用箭头功能let delay = 5000;var startTime = new Date().getTime();const request = () => {  // first apply a random number to a div  let randomNum = Math.floor(Math.random() * 6) + 1;  // document.querySelectorAll(".someClass"+randomNum)[0].setAttribute("id", "test");  // then after a second, remove the class  setTimeout(() => {    // document.querySelectorAll(".someClass"+randomNum)[0].setAttribute("id", "");    // after another second, set state to use later    setTimeout(() => {      this.setState({ someState: 'testing' });    }, 1000);  }, 1000);  // set new delay time  if (new Date().getTime() - startTime > 9000) {    delay = 3000;  }  console.log(new Date().getTime() - startTime);  intervalTimerId = setTimeout(request, delay);};let intervalTimerId = setTimeout(request, delay);

Answer 2

您可以使用箭头函数显式绑定 this.bind(this)或简单地用箭头函数替换函数语法，因为this箭头函数内等于this声明该函数的外部：let intervalTimerId = setTimeout(() => {    ...    setTimeout(() => {       this.setState({someState: "testing"});    }, 1000)}, delay);

Answer 3

您可以尝试使用绑定：let intervalTimerId = setTimeout(function request() { ... }.bind(this)假设您正在使用类组件并且this尚未损坏，不使用类组件的动机之一是：除了使代码重用和代码组织变得更加困难之外，我们发现类可能成为学习 React 的一大障碍。您必须了解 JavaScript 中的工作方式，这与大多数语言中的工作方式非常不同。