ReactJS中map方法导致标题无法渲染的原因排查

你的代码有两个关键问题导致map调用失败：

1. 初始状态未定义为数组，首次渲染触发错误 #

你初始化cocktail时没有设置默认值，默认是undefined。组件首次渲染时，cocktail还没拿到接口数据，直接调用cocktail.map()相当于在undefined上调用方法，必然报错，导致整个组件渲染失败。

2. 错误地将单个对象赋值给state，而非数组 #

接口返回的data.drinks是一个包含多个鸡尾酒对象的数组，你却用data.drinks[0]取了数组的第一个元素（单个对象）赋值给cocktail。map是数组的专属方法，单个对象无法调用map，这也是报错的核心原因之一。

修改后的代码示例 #

import { useState, useEffect } from "react";

export default function SearchAPI() {
    // 初始化state为空数组，避免首次渲染时undefined调用map
    const [cocktails, setCocktails] = useState([])

    useEffect(() => {
        fetch('https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita')
            .then(res => res.json())
            .then(data => {
                // 赋值整个drinks数组，而非单个元素
                setCocktails(data.drinks)
            })
            .catch(err => {
                console.log(`error ${err}`)
            })
    }, [])

    return (
        <>
            <h2>here is your drink</h2>
            {/* 用可选链进一步避免数据未加载时的错误 */}
            {cocktails?.map((element, index) => {
                // 循环渲染必须加唯一key，这里用index做临时方案（推荐用数据自带的idDrink）
                return <h2 key={index}>{element.strDrink}</h2>
            })}
        </>
    )
}

额外说明 #

• 如果你的需求只是渲染第一个鸡尾酒，不需要用map，直接通过cocktails[0]?.strDrink渲染即可，同时也要处理初始为空数组的情况。
• 循环渲染React元素时，必须给每个元素添加唯一的key属性，上面的代码用index作为临时方案，实际开发中建议使用数据自带的唯一标识（比如接口返回的idDrink）。

内容的提问来源于stack exchange，提问作者cloudingAround