当组件收到新的道具时，由道具初始化的反应状态不会更新[重复]

Question

我正在使用 Next.js 和一个组件，该组件在网站等待数据时首先进行骨架加载（使用 tanstack React 查询）：

if (isPending) {
    return <MyComponent
        name={"Loading...."}
        hobbies={[]}
    />
}

return <MyComponent name={data.name} hobbies={data.hobbies}

在这个组件内部，我有一个爱好状态，以便用户可以在将其发送到数据库之前在本地更改爱好列表。

function onSubmit() { // update to server }

function MyComponent(props) {
    const [hobbies, setHobbies] = useState(props.hobbies);
    
    return (
        <form>
           <h1 key={name}>{name}</h1>
           <MyList hobbies={hobbies} />
           <div>
               <input />
               <button type="button" onClick={() => {}}>add</button>
           </div>
           <button>submit</button>
        </form>
    )
}

但是，一旦数据加载，当其他数据（名称）更新时，爱好变量不会更新，并且它保持为空列表。这是因为我在 h1 上有 key 参数，但是当我将 key 添加到 MyList 时，它不会重新渲染。我必须转到另一个网址，然后再回来重新加载爱好参数。

我认为这是因为我最初将爱好的状态设置为空，然后一旦加载数据，它就不会重新更新状态，但我该如何解决这个问题？

Answer 1

关键解决方案是正确的。我只需要在 MyComponent 组件上使用它，而不是在里面的内容：

return <MyComponent name={data.name} hobbies={data.hobbies} key={data.name} />