Reactjs 这个.setState实际上根本没有设置我的状态？_Reactjs

Reactjs 这个.setState实际上根本没有设置我的状态？

reactjs

Reactjs 这个.setState实际上根本没有设置我的状态？,reactjs,Reactjs,我目前正在为购物清单创建一个小的React应用程序。我正试图将列表项保持为状态。提交输入后，为了添加新项目，将调用一个函数，该函数将新列表发送到应用程序，并尝试将状态重置为“”。出于某种原因，这是行不通的。我通过日志记录进行了检查，而且我可以通过我的输入没有重置这一事实来判断代码如下： class List extends React.Component { state = {newItem: ''}; addItem = event => { event.preven

我目前正在为购物清单创建一个小的React应用程序。我正试图将列表项保持为状态。提交输入后，为了添加新项目，将调用一个函数，该函数将新列表发送到应用程序，并尝试将状态重置为“”。出于某种原因，这是行不通的。我通过日志记录进行了检查，而且我可以通过我的输入没有重置这一事实来判断

代码如下：

class List extends React.Component {
  state = {newItem: ''};

  addItem = event => {
    event.preventDefault();

    this.props.onSubmit(this.state.newItem);
    this.setState({newItem: ''});
  }


  render() {
      return (
        <div>
          {this.props.currentUser.shoppingList.map(item => 
            <ListItem 
              {...item} 
              updatedList={this.props.updatedList}
            />)}
            <form onSubmit={this.addItem}>
              <input type="text" placeholder="Add new item!" 
                value={this.state.newItem}
                onChange={event => this.setState({newItem: event.target.value})}
              />
              <button>Save</button>
            </form>
        </div>
      );
    }
}

类列表扩展了React.Component{
状态={newItem:''}；
addItem=事件=>{
event.preventDefault（）；
this.props.onSubmit（this.state.newItem）；
this.setState（{newItem:''}）；
}
render（）{
返回(
{this.props.currentUser.shoppingList.map（项=>
)}
this.setState（{newItem:event.target.value}）
/>
拯救
);
}
}

问题在于您没有将

此

绑定到

附加项

函数

尝试更改

为了

您的状态运行得很好。问题可能出在您的

道具上。这是工作示例，除了列表项

<!DOCTYPE html>
<html>
  <head>
    <title>React State</title>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/jsx">
        class List extends React.Component {
            state = {newItem: ''};

            addItem = event => {
                event.preventDefault();
                console.log(this.state.newItem);
                this.setState({newItem: ''});
            }

            render() {
                return (
                    <div>
                        <form onSubmit={this.addItem}>
                          <input type="text" placeholder="Add new item!" 
                            value={this.state.newItem}
                            onChange={event => this.setState({newItem: event.target.value})}
                          />
                          <button>Save</button>
                        </form>
                    </div>
                );
            }
        }

        ReactDOM.render(
          <List />, 
          document.getElementById("app")
        );
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>


反应状态
类列表扩展了React.Component{
状态={newItem:''}；
addItem=事件=>{
event.preventDefault（）；
console.log（this.state.newItem）；
this.setState（{newItem:''}）；
}
render（）{
返回(
this.setState（{newItem:event.target.value}）
/>
拯救
);
}
}
ReactDOM.render(
, 
document.getElementById（“应用程序”）
);
bindthis
到您的方法：@JosanIracheta如果您像示例中那样将addItem定义为箭头函数，则不需要将其绑定到this。如果使用公共类字段语法，则不需要将方法绑定到this：