React useState数组在初始加载时为空，但在编辑代码后，而应用程序正在运行数组填充?

Question

这真的很难解释，但这里是这样的。我正在构建一个带有过滤器的React卡网格。数据是从我构建的MySQL AWS API中提取的。tags属性是JSON，带有一个数组，其中存储与卡片关联的每个标记。我在App.jsx中编写了Javascript，将此JSON转换为对象，然后将每个唯一标记存储在一个状态块中。参见下面的代码:

//App.jsx
import { useEffect, useState } from 'react';
import '../assets/css/App.css';
import Card from './Card';
import Filter from './Filter'
import {motion, AnimatePresence} from 'framer-motion'
function App() {
const [cards, setCards] = useState([]);
const [filter, setFilter] = useState([]);
const [activeFilter, setActiveFilter] = useState("all");
const [tags,setTags] = useState([]);
useEffect(() => {
fetchData();
}, []);
/*useEffect(() => {
console.log(tags);
console.log(activeFilter);
}, [activeFilter,tags]);
*/
const getTags = () => {
let tags = [];
cards.forEach((card) => {
let obj = JSON.parse(card.tags);
obj.forEach((tag) => {
if (!tags.includes(tag)) {
tags.push(tag);
}
});
});
setTags(tags);
}
const fetchData = async () => {
const data = await fetch("<<api>>");
const cards = await data.json();
setCards(cards);
setFilter((cards));
getTags();
}

return (
<div className="App">
<Filter
cards={cards}
setFilter={setFilter}
activeFilter={activeFilter}
setActiveFilter={setActiveFilter}
/>
<motion.div layout className="Cards">
<AnimatePresence>
{filter.map((card) => {
return <Card key={card.id} card={card}/>;
})}
</AnimatePresence>
</motion.div>
</div>
);
}
export default App;

我遇到的问题是，当我最初运行应用程序时，从React Dev工具检查时标签状态为空。然而，当我保持应用程序运行，然后在getTags()函数中调用setTags(tags)之前添加console.log(tags);之类的东西时，数据突然出现在状态中。如果有人能解释为什么状态似乎是空的，即使我在初始渲染上更新它，那将是非常感激的。

Answer 1

您正在空数组上运行getTags。setCards不会立即设置const变量。新值将在下一个渲染周期中出现。

尝试添加cards参数

const getTags = (cards) => {
let tags = [];
cards.forEach((card) => {
let obj = JSON.parse(card.tags);
obj.forEach((tag) => {
if (!tags.includes(tag)) {
tags.push(tag);
}
});
});
setTags(tags);
}

并像这样使用:

const fetchData = async () => {
const data = await fetch("API url");
const cards = await data.json();
setCards(cards);
setFilter((cards));
getTags(cards);
}