我無法爲道具設置狀態值

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