我们可以将 Typescript class 分配给 React 中功能组件的 useState 字段吗？

Question

我正在研究 this blog - useEffect complete guide topic 并想使用 - 简单的 Typescript class 并更新状态并查看 useEffect 的行为方式。

可以将 Typescript class 分配给 useState 变量吗？？

您可以在 CodeSandbox.io

中找到示例的 link

如果 JSX...就此而言，如果它只是一个 ES6 class 而不是 Typescript 怎么办？

Answer 1

您正在将 class 的实例存储在状态中，但您从未更新它。

您必须注意，即使您将项目添加到 stateHelper class，但实例并没有改变，因此不会再次执行 useEffect。

然而，为了存储在整个组件实例范围内保持不变的实例，最好使用 useRef 而不是 useState

const TypeScriptComponent: FunctionComponent = (props): JSX.Element => {
  // Creating an instance from a (Typescript) Class and assigning it to useState
  const stateHelper = useRef<StateHelper>(new StateHelper());
  const [list, setList] = useState<string[]>([]);

  // ........on button click
  const handleButtonClick = async () => {
    stateHelper.current.addList("Shwetha");
    // Calling an async data from the Typescript class this time
    const result = await stateHelper.current.fireData();
    if (result) {
      stateHelper.current.addList(result);
      const newList = stateHelper.current.getList();
      console.log("New list is: ", newList);
      setList(newList);
    }
  };

  useEffect(() => {
    stateHelper.current.addList("Pramod");
    const newList = stateHelper.current.getList();
    setList(newList);
    console.log("component did mount");
  }, []);

  return (
    <React.Fragment>
      <div>
        {list.length > 0 &&
          list.map((item: any, index: number) => <p key={index}>{item}</p>)}
        <button onClick={handleButtonClick}>Add Me</button>
      </div>
    </React.Fragment>
  );
};

export default TypeScriptComponent;

Answer 2

谢谢大佬。有道理....!

我之所以想 useState 是因为如果我们能有这样的东西

const [customObj, setCustomObj] = useState({}); // primitive object

..为什么没有 class

的完整实例

const customObj = useState(new CustomClass())[0]; // fully fledged instances of a class

这有意义吗？

我们可以将 Typescript class 分配给 React 中功能组件的 useState 字段吗？

Can we assign a Typescript class to a useState field of a Functional Component in React?

typescript

reactjs

use-state