如何在TypeScript的useEffect中更新动态数组？

你这个问题核心是普通变量无法触发React组件重新渲染。你用var subjects : string[] = []声明的是普通数组，不是React的状态变量，React不会追踪它的变化——哪怕你在useEffect里用push加了元素，组件也不知道数据变了，自然不会更新视图。

解决方法很简单，用React的useState来管理这个数组：

1. 替换普通数组为状态变量 #

首先导入useState，然后用状态初始化数组（直接把初始的"C"、"C++"放进去）：

import { useState, useEffect } from 'react';

function YourComponent() {
  // 用useState创建状态，初始值包含C和C++
  const [subjects, setSubjects] = useState<string[]>(["C", "C++"]);

2. 在useEffect里正确更新状态 #

不能直接对状态数组做push操作（React状态是不可变的），要通过setSubjects函数，基于旧状态创建新数组：

useEffect(() => {
    // 用扩展运算符复制旧数组，添加新元素"Java"
    setSubjects(prevSubjects => [...prevSubjects, "Java"]);
  }, []);

这里用函数式更新（prevSubjects => ...）是为了确保拿到的是最新的状态值，避免闭包问题。

3. 展示状态数组 #

之后在组件里直接用subjects状态变量就行，当状态更新时，组件会自动重新渲染，展示最新的数组内容。

为什么不能直接push？ #

React的状态更新依赖引用变化——如果直接修改原数组（比如push），数组的引用没改变，React检测不到数据变化，就不会触发重新渲染。必须返回一个新的数组（比如用扩展运算符、concat或者slice），让React知道状态变了。

内容的提问来源于stack exchange，提问作者spc