Question

我有一个非常简单的React代码，因为我试图理解这些概念。

在下面的代码中，如果我注释掉setState函数，我可以看到selectNumber在我预期的时候运行。但是，当我尝试更改状态的numberBurnt值时，我收到错误。

class Game extends React.Component {
    state = {
        numbersBurnt: [1]
    };
    selectNumber = (clickedNumber) => {    
      console.log('This was run');
      this.setState((prevState, props) => {
        numbersBurnt = [1];
      });
    };
      render() {
      return /* Something */;
    }
  }

错误：Uncaught ReferenceError: numbersBurnt is not defined

更新：这是完整的代码：

function Stars(props) {
    const starsRandNo = Math.ceil(Math.random()*9);
  let stars = [];
  for (let i=0; i < starsRandNo; i++) {
    stars.push(<span key={i} className="star">{i+1}</span>)
  }
  return <div>{stars}</div>;
}

function StarsBtn(props) {
    const starsBtnClick = () => {
    alert('was clicked');
  }
    return <button onClick={starsBtnClick}>Change no of stars</button>
}

function NumberOptions(props) {
    const no = 9;
  let numbers = [];  
  const burnTest = (i) => {
    if (props.numbersBurnt.indexOf(i) >= 0) {
      return "number-options number-options--burnt";
    } else {
      return "number-options";
    }
  }
  for (let i=0; i < no; i++) {  
    numbers.push(<span className={burnTest(i)}
    onClick={() => props.selectNumber(i+1)} >{i+1}</span>)
  }
  return <div>{ numbers }</div>;
}

class Game extends React.Component {
    state = {
    numbersBurnt: [1]
  };
  selectNumber = (clickedNumber) => {    
    console.log(this.state.numbersBurnt);

    this.setState((prevState, props) => {
      numbersBurnt: [2]
    }, () => { console.log(this.state.numbersBurnt)});

    console.log(this.state.numbersBurnt);

  };
  render() {
    return <div>
                    <Stars />
            <br />
            <StarsBtn />
            <br />
            <br />
                <NumberOptions numbersBurnt={this.state.numbersBurnt} 
            selectNumber={this.selectNumber} />
            </div>;
  }
}


ReactDOM.render(
  <Game />,
  mountNode
);

Answer 1

在你的setState中，你应该使用:而不是=。同时删除setState中的;和prevState and props，因为您没有使用它们

class Game extends React.Component {
    state = {
        numbersBurnt: [1]
    };
    selectNumber = (clickedNumber) => {    
      console.log('This was run');
      this.setState({
        numbersBurnt: [1]
      }, () => { console.log(this.state.numbersBurnt)});
    };
      render() {
      return /* Something */;
    }
  }

＆＃13;

function Stars(props) {
    const starsRandNo = Math.ceil(Math.random()*9);
  let stars = [];
  for (let i=0; i < starsRandNo; i++) {
    stars.push(<span key={i} className="star">{i+1}</span>)
  }
  return <div>{stars}</div>;
}

function StarsBtn(props) {
    const starsBtnClick = () => {
    alert('was clicked');
  }
    return <button onClick={starsBtnClick}>Change no of stars</button>
}

function NumberOptions(props) {
    const no = 9;
  let numbers = [];  
  const burnTest = (i) => {
    if (props.numbersBurnt.indexOf(i) >= 0) {
      return "number-options number-options--burnt";
    } else {
      return "number-options";
    }
  }
  for (let i=0; i < no; i++) {  
    numbers.push(<span className={burnTest(i)}
    onClick={() => props.selectNumber(i+1)} >{i+1}</span>)
  }
  return <div>{ numbers }</div>;
}

class Game extends React.Component {
    state = {
    numbersBurnt: [1]
  };
  selectNumber = (clickedNumber) => {    
   

    this.setState({
      numbersBurnt: [2]
    }, () => { console.log(this.state.numbersBurnt)});

    

  };
  render() {
    return <div>
                    <Stars />
            <br />
            <StarsBtn />
            <br />
            <br />
                <NumberOptions numbersBurnt={this.state.numbersBurnt} 
            selectNumber={this.selectNumber} />
            </div>;
  }
}


ReactDOM.render(
  <Game />,
  document.getElementById('app')
);

＆＃13;

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

＆＃13;

Answer 2

你试试。

在构造函数中指定了React状态。

class Game extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      numbersBurnt: [1]
    }
  }
  selectNumber = (clickedNumber) => {    
    console.log('This was run');
    this.setState((prevState, props) => {
      numbersBurnt: [1]
    });
  };
 render() {
  return /* Something */;
 }
}

更简单。

class Game extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      numbersBurnt: [1]
    }
  }
  selectNumber = (clickedNumber) => {    
    console.log('This was run');
    this.setState({
      numbersBurnt: [1]
    });
  };
 render() {
  return /* Something */;
 }
}

您可以省略prevState, props。

React中的setState导致Uncaught ReferenceError

2 个答案: