州の値を小道具から設定できません

Question

なぜこのコードは機能しませんか？ 私はちょうどこのクラスの状態を小道具から設定したいが、状態は常に空である。

class BillsList extends React.Component{ 
 
    constructor (props: any){ 
 
      super(props); 
 
      this.state = {currentList : this.props.list}; 
 
    }; 
 
    render(){ 
 
     console.log(this.props.list); //It worked..! 
 
     console.log(this.state.currentList); //But this is empty 
 
     return(
 
      <div className="bill_list"> 
 
       {this.state.currentList.map((item,i)=> 
 
        <BillsItem key ={i} value={item} /> 
 
       )} 
 
      </div> 
 
     ) 
 
    } 
 
};

'リスト' この enter image description here

Answer 1

のような配列オブジェクトであるあなたは、以下のようにコードを変更する必要があります

class BillsList extends React.Component{ 
    constructor (props){ 
      super(props); 
      this.state = {currentList : props.list}; 
    }; 
    render(){ 
     console.log(this.props.list); //It worked..! 
     console.log(this.state.currentList); //But this is empty 
     return(
      <div className="bill_list"> 
       {this.state.currentList.map((item,i)=> 
        <BillsItem key ={i} value={item} /> 
       )} 
      </div> 
     ) 
    } 
}; 

Answer 2

を私はあなたの小道具を後に受信されると思いますコンポーネントが初期化されます。だからその場合は、componentWillReceivePropsを使用して状態を更新する必要があります。 あなたのケースでは、そのアイデアについては、以下の

componentWillReceiveProps(nextProps) { 
    if(this.props.list !== nextProps.list) { 
    this.setState({ 
     currentList: nextProps.list, 
    }); 
    } 
}