在 ReactJS 中设置状态给我：无法读取未定义的属性 'setState'

Question

无法设置状态属性不知何故未定义

在构造函数中执行 this.spin = this.spin.bind(this) 得到 Cannot read property 'bind' of undefined 并执行自旋箭头函数得到 Failed to compile

import React  from 'react';
function getSeed() {
    return Math.floor(Math.random() / 2)
}
var seed = getSeed();
function spin(timer) {
    var number = timer + [i] * 0.5;
    this.setState({number: number});
}
class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        number:"",
      }
    };
      return (
      <div id="root"></div>
    );
}
export default App;

Answer 1

在您的代码片段中，render 不存在并将自旋函数移入 class，我希望这会解决问题。

import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: ""
    };
    this.spin = this.spin.bind(this);
  }

 spin(timer) {
     //logic
  }

  render() {
    return <div id="root"></div>;
  }
}
export default App;

您也可以使用如下所示的箭头函数，在这种情况下您不想在构造函数中进行绑定。

此外，如果您使用的是最新版本，则不想使用构造函数，babel 已经处理好了。您可以阅读 here 更多相关信息

spin = () => {}

Answer 2

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        number:"",
      }
    };
   getSeed() {
     return Math.floor(Math.random() / 2)
   }
   let seed = getSeed();
   spin(timer) {
//[i] is not defined and it will fail so I am replacing it with  let number = timer * 0.5;
   let number = timer * 0.5;
   this.setState({number: number});
   }
   render(){
    return (
      <div id="root"></div>
    );
  }
}
export default App;

Answer 3

这样试试

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: null,
    }
    this.getSeed = this.getSeed.bind(this);
    this.spin = this.spin.bind(this);
  };

  getSeed () {
    return Math.floor(Math.random() / 2)
  }

  spin (timer, i) {
    var number = timer + [i] * 0.5;
    this.setState({
      number: number
    });
  }

  render() {
    var v_seed = this.getSeed();
    return (
      <div>
        <button onClick = { (e) => this.spin(12, 12)} > Click here </button>
        <div>{`${v_seed} ${this.state.number}`}</div>
      </div>
    );
  }
}

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

<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>

Answer 4

如果你在使用时有反应，就这样试试class

import React  from 'react';
class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        number:"",
      }
    };

    getSeed = () => {
       return Math.floor(Math.random() / 2)
    }

    spin(timer) = () => {
        this.setState({number: timer + [i] * 0.5});
    }
    render(){
        return (
           <div id="root"></div>
        )
    }
}

export default App;

如果你使用 React Hook

import React, {useState}  from 'react';
const App = () => {
    const [number, setNumber] = useState(0)
    const getSeed = () => {
       return Math.floor(Math.random() / 2)
    }

    const spin(timer) = () => {
        setNumber(timer + [i] * 0.5);
    }
    return (
       <div id="root"></div>
    );
}
export default App;

在 ReactJS 中设置状态给我：无法读取未定义的属性 'setState'

Setting a state in ReactJS gives me: Cannot read property 'setState' of undefined

javascript

reactjs

react-state

在 ReactJS 中设置状态给我：无法读取未定义的 属性 'setState'

Setting a state in ReactJS gives me: Cannot read property 'setState' of undefined

javascript

reactjs

react-state

在 ReactJS 中设置状态给我：无法读取未定义的属性 'setState'