function RecipesList() {
//use effect to
useEffect(() => {
const getRecipesList = async () => {
const response = await fetch("http://localhost:4000/recipe/allrecipes", {
method: "GET",
});
const json = await response.json();
if (response.ok) {
setData(json);
const allCategories = [
"all",
...new Set(data.map((item) => item.category)),
];
setCategories(allCategories);
}
};
getRecipesList();
//get all categories from data
}, []);
}想要根据数据数组填充类别数组
从数据库填充数据阵列
1条答案
按热度按时间mwg9r5ms1#
如果这是完整的代码，我认为还有几个问题。你需要定义类别和数据的状态，例如：
const [data, setData] = useState();和const [categories, setCategories] = useState();位于函数的顶部。此外，您试图在
setData(json)之后立即使用data.map。由于React调度状态更新的方式，数据在组件重新呈现之前不会有json内容。我认为有两个解决办法。
1.更改allCategories，使数组来自json变量：
或
1.在dependency数组中创建一个useEffect，并在数据更改时仅更新categories状态：