reactjs状态未更新答案

【问题标题】：reactjs state not being updatedreactjs状态未更新
【发布时间】：2019-12-10 22:43:54
【问题描述】：

在我的 filter() 回调中，newList 包含正确的数组，但状态未更新。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <title>list</title>
      <script src="react/react.js"></script>
      <script src="react/react-dom.js"></script>
      <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
   </head>
   <body>
      <div id='container'>
      </div>
   </body>
</html>


<script type = 'text/jsx'>

class FilteredList extends React.Component{
   constructor(props){
      super(props);
      this.state={list:this.props.list};
   }

   filter(input){
      var newList = this.state.list.filter(function(item){
         return (item.search(input.target.value)!=-1);
      });
      console.log(newList);
      this.setState({list:newList});
      console.log(this.state.list);
   }

   render(){
      return(
         <div>
            <input type='text' placeholder='Filter' onChange={this.filter.bind(this)} />
            <List items={this.state.list} />
         </div>
      );
   }
}

class List extends React.Component{
   constructor(props){
      super(props);
      this.state={items:this.props.items};
   }

   render(){
      return(
         <ul>
            {this.state.items.map(function(item){
               return(<li key={item}>{item}</li>);
            })}
         </ul>

      );
   }
}

   ReactDOM.render(
      <div><FilteredList list={['anteater','bear','cat','dog','elephant','fox']} /></div>,
      document.getElementById('container')
);
</script>

【问题讨论】：

为什么你认为它没有被更新
如果我有线索我会研究它，因此我请求你的帮助。我在控制台中没有错误
这能回答你的问题吗？ React - State not updated
@DCR 我认为您误解了这个问题。他们并没有要求您猜测为什么您的代码没有按照您期望的方式运行，而是要求您通过解释您观察到问题的内容（以及如何）以及预期的行为会给出正确的问题描述相反，即“是什么让你认为代码有问题，如果没有错误？告诉我们[详细]问题是什么”
谢谢，我明白了，虽然有两个 console.log 语句很明显为什么我认为它没有被更新

标签： reactjs setstate

【解决方案1】：

这是因为setState 是异步的。这意味着状态不会在行执行时立即更新，而是稍后。

要在状态更新后执行代码，setState 将回调作为第二个参数：

this.setState({list:newList}, () => console.log(this.state.list))

【讨论】：

【解决方案2】：

要更新状态并显示过滤结果，您需要在父状态更改时重新渲染子组件。

https://codepen.io/asifamingov/pen/QWwNOgQ

class List extends React.Component{
  constructor(props){
    super(props);
    this.state={items:this.props.items};
   }
   componentWillReceiveProps({items}) {
    this.setState({items:items});
   }
   render(){
     return(
        <ul>
            {this.state.items.map(function(item){
                return(<li key={item}>{item}</li>);
            })}
        </ul>

    );
   }
  }

我发现的另一个问题是你正在改变你的原始状态

class FilteredList extends React.Component{
  constructor(props){
    super(props);
    this.state={list:this.props.list, updatedList: this.props.list};
   }
  filter(input){
    var updatedList = [...this.state.list];
    var newList = updatedList.filter(function(item){
        return item.toLowerCase().search(
            input.target.value.toLowerCase()) !== -1;
    });
    this.setState({updatedList:newList});
  }
  render(){
    return(
        <div>
            <input type='text' placeholder='Filter' onChange={this.filter.bind(this)} />
            <List items={this.state.updatedList} />
        </div>
    );
   }
 }

【讨论】：