Question

不能设置State属性，它是未定义的

在构造函数中执行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

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 2

如果您使用react类，请尝试这样

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;

Answer 3

在您的代码段中，不存在渲染，并且在类内移动了spin函数，希望这可以解决问题。

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 4

尝试这样

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>

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

4 个答案: