React：如何使用 getDerivedStateFromProps() 設置組件狀態。 它干擾使用相同狀態變量的受控組件

Question

我有一個接收變量作為道具的組件。 getDerivedStateFromProps() 是典型的，這意味着當 nextProps.someProp 不等於 prevState.someStateVar 時，該道具被分配給狀態變量。

我還有一個 Controlled 元素 - 一個 HTML 文本輸入元素，它與相同的狀態變量相關聯。

問題是，當我通過受控元素更改狀態變量時， getDerivedStateFromProps() 執行並將值設置回之前收到的道具。

作為 React 新手，我不明白為什么會發生這種情況。 上面的動作應該只在接收到一個新的 props 值時發生，就像名稱“nextProps”所暗示的那樣。

請建議如何獲得所需的行為：

1. 使用 prop 設置初始狀態
2. 讓我的受控元素（html 輸入標簽）設置狀態變量的下一個值
3. 如果接收到新的 prop 值，則將其分配給狀態變量的下一個值

Answer 1

文章 - “你可能不需要派生狀態”是真的。

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

我提到了受控組件電子郵件示例。

現在，所有子組件的數據都存儲在父組件的狀態中。 父組件的狀態作為道具傳遞給子組件。 父組件中的方法編輯狀態變量。 此方法作為道具傳遞給子組件。

因此，建立了單一事實來源並將其存儲在父組件中，使其子組件完全受控。 我就是這樣做的。