getDerivedStateFromProps 有什么用（或者你如何觸發它？）

Question

我有以下“列表”組件，我正在嘗試從道具更新 this.state。 我似乎無法讓 getDrivedStateFromProps 與 componentDidUpdate 一起正常工作。 邏輯有問題，但 gDSFC 似乎永遠不會觸發，因為無論是否被注釋掉，我都會得到相同的響應。

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

      this.setState({list:newList});

   }

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

    static getDerivedStateFromProps(nextProps, prevState) {
      console.log('hello1');
    if (nextProps.items !== prevState.items) {
      return {
        items: nextProps.items,
      };
    }
    // Return null if the state hasn't changed
    return null;
  }

   componentDidUpdate(nextProps,prevState){
      console.log('hello2');
      if(nextProps.items !== prevState.items)
      this.setState({items:nextProps.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

升級到 v5.2.1 或更高版本，這個未解決的問題應該是固定的 yarn upgrade -L react-helmet

我認為您需要 16.3.1 或更高版本，可能需要 16.3.3

getDerivedStateFromProps 有什么用（或者你如何觸發它？）

問題描述

1 個解決方案

解決方案1
1 已采納 2019-12-11 02:52:43

getDerivedStateFromProps 有什么用（或者你如何觸發它？）

問題描述

1 個解決方案

解決方案1 1 已采納 2019-12-11 02:52:43

解決方案1
1 已采納 2019-12-11 02:52:43