使用上下文 API (React.js) 僅更改 state object 中的特定鍵

Question

我正在使用上下文 API 來管理 state。 為此，我創建了一個文件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組件，我只需要更新我的 state 的data1鍵。 為此，我創建了一個帶有onClick的按鈕，通過它我將更改我的 state。 為此，我習慣於在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>塊內的文本沒有改變。 雖然當我通過將整個 object 直接傳遞給setAppdata來更改整個 state 時，如下所示，

這樣 state 更新成功。 為什么我只想更改data1鍵的第一種方法不起作用？

Answer 1

您正在以錯誤的方式更新 state，因此它無法正常工作。 這就是你應該如何更新 state

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