[英]React component state becomes invalid after change in parent component
function UserCard({ user }) {
let defaultUserName = user.nicknames[0];
let [selectedNickname, setSelectedNickname] = React.useState(defaultUserName);
// The selected nickname becomes invalid when the user is changed!!!
const selectedNicknameIsValid = user.nicknames.includes(selectedNickname);
return (<div>
<UserCardWithNickName user={user} selectedNickname={selectedNickname} />
<SelectNickName user={user} setSelectedNickname={setSelectedNickname} />
</div>);
在上面的代碼片段中,組件的狀態保存了從用戶昵稱列表中選擇的昵稱。 但是當用戶更改父組件時,該組件會以相同的狀態重新渲染。 所以狀態中的昵稱是給錯誤的用戶的。
處理此問題的首選方法是什么? 很多谷歌搜索都找不到太多討論。
我是否以某種基本的非反應方式這樣做?
使用 useEffect 在狀態變為無效時修復狀態的首選解決方案是否如此處所述React.useState 不會從道具重新加載狀態?
代碼沙盒上的工作示例
是的,父組件的狀態變化通常會重新渲染子組件,從而重置子組件的狀態。 我建議將您想要保留的狀態移動到父樹中。
狀態管理是 React 中的一個重要概念。 隨着您的應用程序的增長,您會意識到這樣做會添加大量臃腫和重復的代碼。 學習狀態管理將證明對您非常有用!
是的。 您發布的鏈接是一種方法。 您必須尋找的問題是您的子組件是否無論如何都在管理 selectedNickname 的值。 這是您希望將其作為單獨狀態保留在子組件中的唯一原因。 如果它所做的只是從父級讀取道具,則只需使用道具並且根本不維護內部狀態。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.