Question

我对React很新。我不明白为什么这个问题不起作用。我有Numbers Component。

const Numbers = (props) => {
  return(
    <div className="card text-center">
        <div>
        {Numbers.list.map((num,i) => 
            <span key={i} onClick={() => props.selectNumbers(num)}>
            {num}
          </span>
        )}
      </div>
    </div>
  );
}

Numbers.list = [1,2,3,4,5,6,7,8,9];

现在在父Game组件中..

class Game extends React.Component {

    state = {
    selectedNumbers : []
  };

  selectNumber = (clickedNumber) => {
    if(this.state.selectedNumbers.indexOf(clickedNumber) >= 0) {return;}
    this.setState(prevState => ({
        selectedNumbers: prevState.selectedNumbers.concat(clickedNumber)
    }));
  };


    render() {
    const {selectedNumbers } = this.state;
    return (
        <div className="container">
        <h3>
            Play Nine
        </h3>
        <hr />
        <div className="row">
          <Answer selectedNums = {selectedNumbers} />
        </div>
        <br />
        <Numbers selectNumbers={this.selectNumber} selectedNums = {selectedNumbers} />
      </div>
    );
  }
}

现在，这件事情很好。但是当我这样做的时候......

this.setState(prevState => ({
        selectedNumbers: prevState.selectedNumbers.push(clickedNumber)
    }));

应用程序按预期工作。

As prevState.selectedNumbers is an array不应该是push而不是concat？我做错了什么？

Answer 1

当您使用push时，您将selectedNumbers设置为推送操作的返回值，这是根据mozilla developer docs的新数组的长度。 Push也试图在状态中改变阵列，正如PhilippSpo所说的那样无法工作。

像以前一样使用concat或将selectedNumbers复制到新数组，将值推入该数组，然后将selectedNumbers设置为新数组。如果您正在使用ES6，则可以像其他用户指出的那样使用扩展运算符

Answer 2

用几句话说：

Array.prototype.push()会返回整数   数组length。

Array.prototype.concat()返回带有标题的新数组   元件。

Answer 3

如评论中所述push是一个变异函数，它返回结果数组的长度。您可以使用spread syntax轻松推送新项目。

this.setState(prevState => ({
        selectedNumbers: [...prevState.selectedNumbers, clickedNumber]
    }));

Answer 4

您应该使用 concat（）函数代替 push（），因为反应不能很好地与对象可变性反应人们强调反应开发人员保持不可变状态

当你使用 concat（）函数时，它总是返回一个新对象，而不是改变同一个旧对象，这就是为什么你不应该在反应中使用 push（）函数因为push会改变旧对象。

concat vs push in react js

4 个答案: