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

Question

我有一个数组声明为

 var subjects : string[] = [];

然后将数组的值设置为

subjects.push("C")
subjects.push("C++")

然后我想从 useEffect 更新这个数组。 我试过下面的代码

  useEffect(()=>{
    subjects.push("Java")
  },[])

显示主题数组时，它不会更新为“Java”。 谁能帮我解决这个问题？

Answer 1

您没有触发组件的任何重新渲染。 当props或状态发生变化时重新渲染。 您正在尝试更新 React 世界中的不可变数据，而算法不知道它已更改，因此 UI 不会反映更新的主题数组。

因此，您可以使用useState挂钩以这种方式声明您的主题数组：

const [subjects, setSubjects] = useState<string[]>(["C++", "C"])

然后你可以用这种方式更新它：

setSubjects((prev) => [...prev, 'Java']);

Answer 2

使用钩子 useState 来创建你的数组。

 const [value, setValue] = useState<string[]>([])

如果你想改变数组，你应该将新值设置为 setValue([...value, "Java"]);

Answer 3

声明一个状态挂钩并在其中存储subjects值。

const [subjects, setSubjects] = useState<string[]>(["C", "C++"]);

然后在useEffect中更改subjects值：

useEffect(()=>{
   const currentSubjects = [...subjects];
   currentSubjects.push("Java");
   setSubjects(currentSubjects);
},[])

Answer 4

因为你没有使用状态变量（useState）并且你的主题数组内部有Java但是在你的组件被重新渲染之前它是不可见的所以在我看来你应该使用const [subjects, setSubjects]: string[] = useState<string[]>([])和 useEffect:-

useEffect(()=>{
setSubjects([...subjects, 'Java']);},[])