React typescript useContext 不会在更改时触发重新渲染

Question

我正在尝试使用 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;
}

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

Answer 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>

React typescript useContext 不会在更改时触发重新渲染

React typescript useContext not triggering re-render on change

typescript

reactjs

react-hooks

use-context