如何在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(()=>{
setSubjects([...subjects, 'Java']);},[])