为啥在我设置它们后获取的数据不填充状态？

Posted 2023-02-22

【中文标题】为啥在我设置它们后获取的数据不填充状态？

【英文标题】：Why fetched data do not populate the state after i set them?为什么在我设置它们后获取的数据不填充状态？

【发布时间】：2021-12-23 08:19:45

【问题描述】：

数据提取成功，但我的状态没有改变。

我将状态类别初始化为空 []，然后我想将其设置为我获取的数据。响应正常，可以在控制台看到数据。

这是一个对象，有一对：categories:Array(14) 这是我要找的。​​p>

const [categories,setCategories] = useState([])

useEffect(() => 
    const fetchMeals = async () => 
      const res = await fetch(
        "https://www.themealdb.com/api/json/v1/1/categories.php"
      );
      const data = await res.json();
      console.log(data.categories);      /*array (14)*/ 
      setCategories(data.categories.map((cat) => cat.strCategory));
      console.log(categories);          /*empty array*/
    ;
    fetchMeals();
  ,[]);

为什么不起作用？

【问题讨论】：

我不认为该套装可以立即使用；类别将在下一次渲染时设置。如果您在组件中显示类别，您应该会看到新值；您的代码看起来正确（尽管我会为 fetch 添加一些错误检查）。

data.category 中的对象的结构是什么？此外，setCategory 是异步的，因此您在此阶段看不到 category 状态更新。把你的console.log(categories)放在使用效果之外。

【参考方案1】：

setState 是类似异步的操作，因此您永远不会看到同步更新的状态（在调用 setState 之后）。 你也可以这样做：

const updatedCategiories = data.categories.map((cat) => cat.strCategory);
setCategories(updatedCategiories);
console.log(updatedCategiories);