提问人：Anmol Garg 提问时间：11/10/2023 更新时间：11/10/2023 访问量：84
React useState（） 数组未在 useEffect（） 中更新
React useState() array not updating inside useEffect()
问：
import { useState, useEffect } from "react";
import 'react-tabulator/lib/styles.css';
import { ReactTabulator } from 'react-tabulator'
export default function Project() {
const [projects, setProjects] = useState([]);
const [isLoading, setLoading] = useState(true);
const projectListUri = '/api/projects';
// const apiPath = process.env.REACT_SERVER_HOST + projectListUri;
useEffect(() => {
fetch("http://localhost:8000/api/projects")
.then((response) => response.json())
.then((data) => {
console.log(data); // line 16
setProjects(data);
console.log(projects); //line 18
setLoading(false);
}).catch((error) => {
console.log(error.message);
setLoading(false);
});
}, []);
return (
<div>
{isLoading ? (
<p>Loading...</p>
) : (
<ReactTabulator
data={projects}
autoColumns={true}
layout={"fitColumns"}
/>
)}
</div>
);
}
以上是我在应用程序中运行的代码。我正在从后端服务器获取数据。获取数据正常。我可以看到在第 16 行正确登录的数据。但是第 18 行始终显示一个空数组。因此，制表器库正确地提供了 isLoading 常量更新。Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'slice').
我试过两者都不起作用。setProjects(...data); setProjects([data]); setProjects(...projects, ...data);
答：
0赞
Akeel Ahmed Qureshi
11/10/2023
#1
若要解决此问题，可以使用另一个 useEffect 钩子来观察项目状态的变化，并相应地执行操作。 更新后的代码如下：
import { useState, useEffect } from "react";
import 'react-tabulator/lib/styles.css';
import { ReactTabulator } from 'react-tabulator';
export default function Project() {
const [projects, setProjects] = useState([]);
const [isLoading, setLoading] = useState(true);
const projectListUri = '/api/projects';
useEffect(() => {
fetch("http://localhost:8000/api/projects")
.then((response) => response.json())
.then((data) => {
setProjects(data);
setLoading(false);
})
.catch((error) => {
console.log(error.message);
setLoading(false);
});
}, []);
//here's the modified code
useEffect(() => {
console.log(projects);
}, [projects]);
return (
<div>
{isLoading ? (
<p>Loading...</p>
) : (
<ReactTabulator
data={projects}
autoColumns={true}
layout={"fitColumns"}
/>
)}
</div>
);
}
评论
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'slice').