在 React 中映射获取的数据

Question

我在反应中映射获取的数据时遇到问题。我有这些数据，我成功获取了这些数据，但是我在将其映射到数组时遇到了问题。

        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]);

Answer 1

console.log(listData) 记录没有设置状态的原因是 asynchronous。

console.log(transformedData); 没有记录的原因是因为您需要使用 data.order_items.map 而不是 data.results.map

在 React 中映射获取的数据

Mapping fetched data in React

javascript

api

json

fetch

reactjs