React在调用API并改变状态后不会重新呈现

Question

我刚刚进入react，并试图从我的api中获取一些数据，但改变状态不会触发组件的重新渲染。我有一些代码在useeffect函数在我的组件中获取我的api，然后设置作为道具传递的状态。这是在App.js中声明的状态:

const [username,setUsername] = useState("");
const [all,setAll] = useState([]);
const [today,setToday] = useState([]);

我将它们和它们的set函数作为道具传递给APP.js，在那里我使用useeffect函数来获取数据并设置状态。组件代码的开头是这样的:

const APP = ({username,all,setAll,today,setToday}) => {  
useEffect(() => {
axios.get(`http://localhost:3001/api/${username}`)
.then(response =>{
let data = [response.data];
setAll(data[0]);
console.log(all);
const t = all.filter((task) => task.title === "a");
setToday(t);
console.log(today);
});
}, []);

问题是，获取数据没有问题，setAll也可以工作并触发重新渲染，但setToday什么也不做(它保证有一个标题等于"a"的任务)。当我在useeffect的第五行console log {all}时，它只是打印一个空数组，即使重新渲染发生了，我在重新渲染后的页面中显示{all}的任务。是因为当它到达倒数第二行的时候{all}的任务还没有设置好吗?如果是这种情况，我怎么才能过滤任务，然后设置其他状态?我知道有一些类似的问题，但这些问题的答案没有一个对我有帮助。

Answer 1

setAll(data[0]);
const t = all.filter((task) => task.title === "a");

问题基本上是在你声明const t = all.filter((task) => task.title === "a");的时候，all仍然是一个空数组。

看，当你使用setAll时，它基本上告诉react:嘿，当你完成渲染这个时，将all设置为data[0]的值。这不会立即发生，它会在下一个循环中发生。

如果我是你，我会这样做:

const APP = ({username,all,setAll,today,setToday}) => {  
useEffect(() => {
axios.get(`http://localhost:3001/api/${username}`)
.then(response =>{
const data = [response.data];
const responseAll = data[0];
const t = responseAll.filter((task) => task.title === "a");
setAll(responseAll);
setToday(t);
});
}, []);