反應：當新的道具傳遞給組件時，構造函數中聲明的this.var不會更新

Question

我無法理解為什么在將新的props傳遞給子組件時不更新在構造函數中初始化的變量。

當新的道具被發送到組件時，this.data仍然是舊道具的值。 （請注意，這只是一個示例，沒有任何狀態更改來演示，我知道使用狀態是一種替代方法）

constructor(props) {
    super(props)
    this.data = this.props.receivedData 
}

  render() {
    console.log(this.props.receivedData) -> prints new props data
    console.log(this.data) -> retains old props data
    return (
      <svg
        ....
      </svg>
    )
  }

Answer 1

傳遞新的prop時，構造函數不會再被調用。 過去，您會陷入componentWillReceiveProps生命周期方法中。 但是，最近認為這是不好的getDerivedStateFromProps ，您應該改用getDerivedStateFromProps方法。

參見官方文檔 。

本文在解釋它方面做得不錯。

Answer 2

僅在創建組件時（在其中分配值）才第一次調用構造函數。 下次您將以ComponenantWillReceiveProps(nextProps)方法接收道具。 嘗試以下代碼：

 constructor(props) {
   super(props)
   this.data = this.props.receivedData;
}
ComponenantWillReceiveProps(nextProps){
    if(this.props.receivedData !== nextProps.receivedData){
         this.data = nextProps.receivedData;//new data will be updated here
      }
}
render() {
    console.log(this.props.receivedData)
    console.log(this.data)
    return (
      <svg
      </svg>
    )
 }

您可以使用狀態來更新值並在收到新數據時呈現視圖。

例如： -

constructor(props) {
   super(props)
   this.data = this.props.receivedData;
   this.state = {
       data : this.props.receivedData
   };

}
ComponenantWillReceiveProps(nextProps){
    if(this.props.receivedData !== nextProps.receivedData){
         this.setState({data:nextProps.receivedData});//new data will be updated here
      }
}
render() {
    console.log(this.props.receivedData)
    console.log(this.data)
    return (
        <div>{this.state.data}</div>
    )
 }

Answer 3

只是為了擴大其他答案。 根據您要嘗試執行的操作，有不同的處理方法。 在其他答案說明的情況下，構造函數將只在組件的構造上運行一次。

現在，如果您要獲取傳入的道具並將其存儲為狀態，然后由於新道具getDerivedStateFromProps該狀態得到更新，則可能需要getDerivedStateFromProps 。 但是，如果這是您想要的，那么首先要知道為什么要這樣做是很重要的，因為您可能不需要這樣做。 導致人們選擇這種模式的一個常見原因是記憶道具，但是可以並且應該使用記憶庫來實現。 您可以在此處了解更多信息。

選擇此選項的另一個原因是，由於更改了道具，因此僅對組件進行了更新。 現在，您已在問題中暗示了這一點，但是為了清楚起見，您需要做的就是使用傳入的道具，並且當它們更改時，組件也會隨之更新。 換句話說，為了簡單地渲染道具，沒有理由將它們存儲在狀態或實例變量中。