在 React 中映射获取的数据

Posted 2023-02-22

【中文标题】在 React 中映射获取的数据

【英文标题】：Mapping fetched data in React

【发布时间】：2021-09-30 20:36:51

【问题描述】：

我在将获取的数据映射到 react 时遇到问题。 我有这些数据，我成功获取了这些数据，但我无法将其映射到数组。

        order_id: 9999,
        order_items: [
          
            ean: 1234,
            name: 'LIV Aquafilter 2000',
            count: 1
          ,
          
            ean: 12345,
            name: 'Beko EWUE 7612CSXS0',
            count: 1
          
        ]

有我的代码，数据控制台日志工作正常，但另外两个什么也没记录

const fetchInvoiceData = useCallback(async () => 
    setIsLoading(true);
    setError(null);
    try 
      const response = await fetch("some_link");
      if (!response.ok) 
        throw new Error("error!");
      

      const data = await response.json();
      console.log(data);
      const transformedData = data.results.map((invoiceData) => 
        return 
          id: invoiceData.order_id,
          name: invoiceData.name,
        ;
      );
      setListData(transformedData);
      console.log(listData);
      console.log(transformedData);
     catch (error) 
      setError(error.message);
    
    setIsLoading(false);
  , []);

  useEffect(() => 
    fetchInvoiceData();
  , [fetchInvoiceData]);

【问题讨论】：

listData 是什么？你想console.log 一个不存在的变量吗？尽管我看到您也在映射 .results，即使您的 JSON 只有 .order_items?

这能回答你的问题吗？ Why calling react setState method doesn't mutate the state immediately?

@KelvinSchoofs listData 只是 useState 数组，.results 是问题所在，谢谢。

【参考方案1】：

console.log(listData) 日志的原因是没有设置状态为asynchronous。

console.log(transformedData); 不记录任何内容的原因是您需要使用data.order_items.map 而不是data.results.map