反应打字稿useContext不会触发更改时重新渲染答案

【问题标题】：React typescript useContext not triggering re-render on change反应打字稿useContext不会触发更改时重新渲染
【发布时间】：2020-11-20 00:45:26
【问题描述】：

我正在尝试使用 useContext 更改对象，但它没有触发。对象在屏幕上没有变化。如果我单击另一个按钮，它会触发它们。代码如下面的代码所示。 https://codesandbox.io/s/vpr9msmaicih7-lnkzr

*提供者

    import React, { FC, useState, createContext, ReactNode } from "react";
    import { Data } from "./type";
    type ContextType = {
      text: string;
      setText: (text: string) => void;
      data: Data | undefined;
      setData: (data: Data) => void;
    };
    type Props = {
      children: ReactNode;
    };
    const AuthContext = createContext<ContextType>({} as ContextType);
    
    const AuthProvider: FC<Props> = ({ children }: Props) => {
      const [text, setText] = useState<string>("default");
      const [data, setData] = useState<Data | undefined>({} as Data);
      const value = {
        text,
        setText,
        data,
        setData
      };
      return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
    };
    export { AuthProvider, AuthContext };

*页面

<button
        onClick={() => {
          if (data) {
            let obj = data;
            obj.id = "1001";
            obj.date = new Date().toString();
            setData(obj);
          }
        }}
      >
        Change Object Not working
      </button>

export default function App() {
  return (
    <AuthProvider>
      <Page />
    </AuthProvider>
  );
}

export interface Data {
  id: string;
  date: string;
}

我不确定我在这里做错了什么。任何帮助都会很有用。

【问题讨论】：

标签： reactjs typescript react-hooks use-context

【解决方案1】：

所以当你说let obj = data 时，你实际上是在直接改变状态。 obj 现在只是对 data 的引用。那么当你设置setData(obj)时，react 并不知道状态变量已经改变，因为你已经改变了它。您可能想要做的是制作副本。您可以使用扩展运算符{...data} 来执行此操作。然后使用setData:

<button
  onClick={() => {
    if (data) {
      let obj = {...data};
      obj.id = "1001";
      obj.date = new Date().toString();
      setData(obj);
    }
  }}
>
  Change Object Not working
</button>

【讨论】：