setState没有更新状态：ReactJS

Question

我觉得我已经在阳光下尝试了所有东西，但是一定缺少一些非常明显的东西。在addItem() function下面，我试图将一个新项目推入数组并更新状态，但是无论我做什么，状态都不会从初始数组更改。

当我console.log newListItems时，新项目就包括在内，因此到目前为止所有工作都在进行，它是不会更新的实际状态。我想念什么？

addItem方法：

addItem(text){
    var newListItems = this.state.listItems;
    newListItems.push(text);
    console.log(newListItems);

    this.setState = ({
        listItems : newListItems
    });

}

我也没有在控制台中收到任何错误消息。

完整代码：

import React, { Component } from 'react';

import './App.css';



class ListItem extends Component{

  render(){

    return (<li>{this.props.title}</li>);

  }

}



class AddItem extends Component{



  handleClick(){

    this.props.addItem('blah');

  }



  render(){

    return (

      <div className="additem">

        <input type="text" className="newitemname"/>

        <span className="btn" onClick={this.handleClick.bind(this)}>Add item</span>

      </div>

    );

  }

}





class App extends Component {



  constructor(props){

    super(props);

    this.state = {

      listItems : ['Wash the dishes','Do the laundry','Something else']

    };

  }



  addItem(text){

    var newListItems = this.state.listItems;

    newListItems.push(text);

    console.log(newListItems);

    this.setState = ({

      listItems : newListItems

    });

  }



  render() {

    return (

      <div className="App">

        <ul>

          {this.state.listItems.map(function(item,index){

              return (

                  <ListItem key={index} title={item} />

              );

          })}

        </ul>

        <AddItem addItem={this.addItem.bind(this)} />

      </div>

    );

  }



}





export default App;

Answer 1

问题是，您state以错误的方式更新了，请使用以下命令：

this.setState({
    listItems : newListItems
});

代替这个：

this.setState = ({
    listItems : newListItems
});

原因：

因为 setState 是一个函数而不是变量，所以我们需要调用它来更新状态值。

检查以获取有关
setState行为的 更多详细信息。

其他建议 ：

当您将任何array变量赋给任何变量时，变量只会获得的引用array，这意味着您将执行的所有更改将直接应用于原始变量array。而且它不是一个好主意，变异的state直接变量，因此首先创建的副本array使用slice，再使用push，以在添加项目。像这样：

var newListItems = this.state.listItems.slice();
newListItems.push(text);
this.setState({
     listItems : newListItems
});

根据DOC：

切勿直接更改this.state，因为之后调用setState（）可能会替换您所做的更改。将此this.state视为不可变的。

检查工作示例：

class ListItem extends React.Component{



  render(){

    return (<li>{this.props.title}</li>);

  }



}





class AddItem extends React.Component{



  handleClick(){

    this.props.addItem(this.item.value);

  }



  render(){

    return (

      <div className="additem">

        <input type="text" ref={item => this.item=item} className="newitemname"/>

        <span className="btn" onClick={this.handleClick.bind(this)}>Add item</span>

      </div>

    );

  }



}





class App extends React.Component {



  constructor(props){

    super(props);

    this.state = {

      listItems : ['Wash the dishes','Do the laundry','Something else']

    };

  }



  addItem(text){

    var newListItems = this.state.listItems.slice();

    newListItems.push(text);

    this.setState({

      listItems : newListItems

    });

  }



  render() {

    return (

      <div className="App">

        <ul>

          {this.state.listItems.map(function(item,index){

              return (

                  <ListItem key={index} title={item} />

              );

          })}

        </ul>

        <AddItem addItem={this.addItem.bind(this)} />

      </div>

    );

  }



}



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




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