使用上下文 API (React.js) 仅更改状态对象中的特定键

Question

我在 React 中使用上下文 API 来管理状态。为此，我创建了一个文件 AppContext.js，我在其中创建了上下文和 Provider:

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 键的地方不起作用？

Answer 1

您正在以错误的方式更新状态，因此它无法正常工作。这是你应该如何更新状态

<button
 onClick={() =>
   setAppdata((prevState) => ({
     ...prevState,
     data1: "Your New Data"
        }))
      }
    >
        click to change
      </button>

使用上下文 API (React.js) 仅更改状态对象中的特定键

Using context API (React.js) to change only a particular key in state object

javascript

reactjs

react-context

use-context