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

Posted 2023-04-14

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

【英文标题】：Using context API (React.js) to change only a particular key in state object

【发布时间】：2021-06-08 10:45:31

【问题描述】：

我在响应中使用上下文 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 键的第一种方法不起作用？

【参考方案1】：

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

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

【讨论】：

您的解决方案有效。但是你能说出我的方法有什么问题导致它停止工作吗？据我所知 setAppdata() 采用隐式函数。你直接使用了 ()=>("hello") 而我使用了 ()=>return "hello"。如果我没记错的话，两者在技术上是相同的。请解释...

您也在更新状态，但您正在直接修改state，这不会导致重新渲染。 read this 了解更多信息

哦，明白了！非常感谢！