React Context 值永远不会更新答案

【问题标题】：React Context value never updatesReact Context 值永远不会更新
【发布时间】：2021-08-04 21:54:44
【问题描述】：

我有以下代码作为返回上下文的组件。出于某种原因，当我调用 updateUser 函数时它没有设置状态，我不断得到一个空白对象。当它有参数时，我必须对这样的函数做些什么不同的事情吗？

import React, { useState } from "react";
const UserContext = React.createContext({
  user: {},
  updateUser: (incomingUser) => {},
});
const UserData = (props) => {
  const [user, setUser] = useState({});

  const updateUser = (incomingUser) => {
    setUser(incomingUser);
    console.log(`user=${JSON.stringify(incomingUser)}`);
  };

  return (
    <UserContext.Provider value={{ user, updateUser }}>
      {props.children}
    </UserContext.Provider>
  );
};
export { UserData, UserContext };

【问题讨论】：

标签： reactjs react-context

【解决方案1】：

去掉UserContext的默认值，或者初始化为null：

const UserContext = React.createContext(null);

根据React Docs：

当 React 呈现订阅此 Context 对象的组件时，它将从树中最接近匹配的Provider 中读取当前上下文值。

defaultValue 参数仅在组件在树中没有匹配的 Provider 时使用。此默认值有助于在不包装组件的情况下单独测试组件。

【讨论】：