javascript - 使用上下文 API (React.js) 仅更改状态对象中的特定键
问题描述
我正在使用上下文 API 来管理状态。为此,我创建了一个文件AppContext.js,在其中创建了上下文和提供程序:
import { useState, createContext } from "react";
export const AppContext = createContext();
export const AppProvider = (props) => {
const [appdata, setAppdata] = useState({
data1: "this is data1",
data2: "this is data2",
});
return (
<AppContext.Provider value={[appdata, setAppdata]}>
{props.children}
</AppContext.Provider>
);
};
我已将此 Provider 导入应用程序的父组件中,即App.js。此外,我已将<AppChild/>
组件包装在 Provider 中。
import AppChild from "./AppChild";
import { AppProvider } from "./AppContext";
const App = () => {
return (
<AppProvider>
<div className="App">hello</div>
<AppChild />
</AppProvider>
);
};
export default App;
现在从AppChild
组件中,我只需要更新data1
我的状态键。为此,我创建了一个按钮,onClick
通过它我将改变我的状态。为此,我习惯于在AppChild.js中使用以下代码:
import { useContext } from "react";
import { AppContext } from "./AppContext";
const AppChild = () => {
const [appdata, setAppdata] = useContext(AppContext);
return (
<div>
<h3 style={{ color: "red" }}>Data for Appchild: {appdata.data1}</h3>
<button
onClick={() =>
setAppdata((prev) => {
prev.data1 = "updated data1";
return prev;
})
}
>
click to change
</button>
</div>
);
};
export default AppChild;
但是当我单击按钮时,<h3>
块内的文本并没有改变。setAppdata
虽然当我通过将整个对象直接传递给如下所示
来更改整个状态时,
这样状态更新成功。为什么我只想更改data1
密钥的第一种方法不起作用?
解决方案
您以错误的方式更新状态,因此它不起作用。这就是你应该如何更新状态
<button
onClick={() =>
setAppdata((prevState) => ({
...prevState,
data1: "Your New Data"
}))
}
>
click to change
</button>