javascript - 无法使用 React hooks 读取未定义的属性 'map'

Question

我试图使用 fortnite api 来显示当前的元素商店，但我遇到了如标题所示的错误，当我控制台日志结果时，它显示一个数组，但我无法映射它？为什么？

import React, { useState, useEffect } from 'react'
import axios from 'axios';
export default function itemShop() {
    const [shop, setShop] = useState('')
    const API = 'https://fortnite-public-api.theapinetwork.com/prod09/store/get?language={en}'
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                API,
            );

            setShop(result.data);
        };
        fetchData();
    }, []);

    const { items } = shop;
    console.log(items)
    return (
        <div>
            <p>{shop.date}</p>
            {items.map(item => <p>{item.name}</p>)}
        </div>
    )
}

代码沙箱:https://codesandbox.io/embed/km10wq4y5

Answer 1

在渲染之前，您需要检查项目是否为空/未定义:

{items && items.map(item => (
        <p>{item.name}</p>
      ))}

工作中:https://codesandbox.io/s/24vkqzn6xy