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

我在react中使用上下文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>
   );
};

但是当我单击按钮时，

块中的文本没有改变。虽然当我通过将整个对象直接传递到

setAppdata

来更改整个状态时，如下所示，

---

这样，状态将成功更新。为什么第一种方法在我只想更改

data1

键的情况下不起作用？

您以错误的方式更新状态，因此它不起作用。这是您应该如何更新状态的

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

setAppdata（（prevState）=>({
…国家，
数据1：“您的新数据”
}))
}
>
单击以更改

您的解决方案有效。但是，你能告诉我，我的方法有什么错误，使它无法工作吗？据我所知，setAppdata（）接受一个隐式函数。您直接使用了（）=>（“hello”），而我使用了（）=>{return“hello”}。如果我没有错的话，两者在技术上是相同的。请解释…您也在更新状态，但您正在直接修改

状态

，这不会导致重新渲染。更多信息哦，明白了！谢谢！

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;

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