问题是,您
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' />


