Reactjs 反应上下文-直接从使用者修改提供者上下文可以吗？

在这里，我有一个初始化上下文并将其传递给应用程序的提供者

const appContext = {
  person: "Larry"
};

render(
  <BrowserRouter>
    <AppContext.Provider value={appContext}>
      <App />
    </AppContext.Provider>
  </BrowserRouter>,
  document.getElementById("root")
);

const appContext={
人物：“拉里”
};
渲染(
,
document.getElementById（“根”）
);

应用程序下有一个消费者，根据其状态修改上下文。当用户点击一个不同的链接并返回时，可以从上下文中恢复状态（在本例中为所选下拉列表）

const Consumer = props => {
  const [dropdownOpen, setOpen] = useState(false);
  const appContext = useContext(AppContext);

  const toggle = () => setOpen(!dropdownOpen);
  const changePerson = e => {
    appContext.person = e.currentTarget.textContent;
  };
  const people = ["Moe", "Larry", "Curly"];
  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>{appContext.person}</DropdownToggle>
      <DropdownMenu>
        {people.map((p, idx) => {
          return (
            <DropdownItem
              key={idx}
              active={appContext.person === p}
              onClick={changePerson}
            >
              {p}
            </DropdownItem>
          );
        })}
      </DropdownMenu>
    </ButtonDropdown>
  );
};

const Consumer=props=>{
常量[dropdownOpen，setOpen]=useState（false）；
const-appContext=useContext（appContext）；
const toggle=（）=>setOpen（！dropdownOpen）；
const changePerson=e=>{
appContext.person=e.currentTarget.textContent；
};
const people=[“Moe”、“Larry”、“Curly”]；
返回(
{appContext.person}
{people.map（（p，idx）=>{
返回(
{p}
);
})}
);
};

---

如上所示，直接更新消费者中的appContext.person是否安全？代码运行正常，但我只想确保这样做是正确的。

我建议不要这样做。在少数组件直接使用上下文的简单情况下，它可能工作得很好，但它存在数据不同步的风险，并且可能不会触发监听该值更改的操作。建议将可变数据存储在状态中，然后传递一个可用于更新值的函数。这里的示例使用类组件，但它的概念是相同的。我同意@ChrisB。看一看这两个示例，我将修改代码以遵循该模式。