Question

在我的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>

Answer 1

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

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

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

Answer 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>
    );
   }
 }

reactjs状态未更新

2 个答案: