栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

setState没有更新状态:ReactJS

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

setState没有更新状态:ReactJS

问题是,您

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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/640690.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号