處理子組件更新（受控與不受控制）

Question

有一個Parent組件，其中包含一個Child組件。

• Parent應該加載數據（例如使用AJAX）並更新Child 輸入 。
• Child應該監聽改變其輸入和更新它們 。

從Parent設置Child 道具可設置輸入值：

<input value={this.props.someVal}

但這使它無法自我更新child ，因為為了自我更新其輸入 ，必須使用：

<input value={this.state.someVal}

---

這是否意味着， Child必須偵聽輸入更改並觸發Parents處理函數來設置其props ？

我認為設置組件屬性-自動更新相應的狀態（觸發重新渲染），並且使用<input value={this.state.someVal}應該可以同時解決這兩種情況。

Answer 1

道具和狀態之間確實沒有任何聯系。 這是兩種不同的機制：狀態是組件內部的狀態，用於保留封裝的數據。 完成后，道具由封閉的對象發送。

有幾種方法可以解決此問題，但是普遍的共識是，將狀態放在一個位置並將其傳遞到組件樹中可以減少混亂的代碼和錯誤。 這意味着您的陳述是正確的-您必須將更新功能從父級傳遞到子級組件，以便在被調用時它將使用新的道具重新呈現子級。

Answer 2

我已經找到了方法。 有點像（TypeScript語法）：

componentWillReceiveProps(props: Props) {
  this.setState({
    data: props.data
  })
}

這將允許從父級和子級本身更新子級。 不確定這是否是正確的方法，但是還是可以的。

Answer 3

父組件將進行ajax調用並設置其自己的狀態，狀態值將作為prop傳遞，這將始終更新子項。

 class parent extends React.Component {
  state = {
    value: null
  }
  componentWillMount() {
    this.makeApiCall()
  }
  makeApiCall = () => {
    fetch("api_ulr")
      .then(() => {
        this.setState({
          value: newValue,
        })
      })
  }
  render() {
    return ( < Child value = {
      this.state.value
    } > < /Child>)
  }

}

現在，無論何時有新數據，孩子都會更新。