React展示JSON数组遇问题：map报错及无法渲染求助

问题梳理 #

需要展示后端返回的 hits 数组（内含 recipe 对象）内容，但遇到三个问题：

• 直接输出 state 中的 list 无内容
• 使用 map 遍历触发错误：Cannot read properties of undefined (reading 'map')
• 修改 getData 函数后出现错误：TypeError: Cannot read properties of undefined (reading 'setState')

错误原因分析 #

1. 直接输出无内容：初始代码中 setState 赋值路径错误，axios 响应数据存在于 response.data 而非 response 本身，导致 list 未正确获取到 hits 数组。
2. map 遍历报错：若 list 被赋值为 undefined（比如错误获取 response.hits），或后续修改后 response.data 不是数组，调用 map 就会触发 undefined 错误。
3. setState 报错：修改后的 getData 使用普通函数，未绑定 this，导致函数内 this 指向错误，无法访问组件的 setState 方法。

解决步骤 #

1. 修正数据获取路径 #

后端返回的 hits 数组在 response.data 中，需正确赋值：

this.setState({ list: response.data.hits })

2. 确保 this 指向正确 #

保留初始代码中的箭头函数写法（自动绑定 this），或在 constructor 中绑定普通函数版的 getData：

// 方法一：箭头函数（推荐）
getData = () => { /* ... */ }

// 方法二：constructor 绑定
constructor(props) {
  super(props)
  this.state = { list: [] }
  this.getData = this.getData.bind(this)
}

3. 安全遍历数组并展示 Recipe 属性 #

渲染时先做空值检查，避免未加载完成时调用 map，同时访问 hit.recipe 获取具体属性：

<ul>
  {this.state.list?.map((hit, index) => (
    <li key={index}>
      <h3>{hit.recipe.label}</h3>
      <img src={hit.recipe.image} alt={hit.recipe.label} width="100" />
      <p>来源：{hit.recipe.source}</p>
      <p>份量：{hit.recipe.yield} 份</p>
      <p>饮食标签：{hit.recipe.dietLabels.join(', ')}</p>
    </li>
  ))}
</ul>

修正后的完整代码 #

import React, { Component } from 'react';
import axios from 'axios'

const api = 'http://localhost:5000' // 后端地址

class GetRecipe extends Component{
    constructor(props){
        super(props)
        this.state={
            list:[]
        }
    }
    
    getData = () => {
        const url = `${api}/getRecipe`;
        axios.get(url)
        .then(response => {
            console.log(response.data)
            // 正确获取 hits 数组
            this.setState({ list: response.data.hits })
        }).catch(err => console.log(err))
    }

    render(){
        return(
            <div>         
                <h2>获取食谱</h2>  
                <button onClick={this.getData}>获取数据</button>
                {/* 安全遍历并展示 recipe 属性 */}
                <ul>
                    {this.state.list?.map((hit, index) => (
                        <li key={index} style={{ margin: '1rem 0' }}>
                            <h3>{hit.recipe.label}</h3>
                            <img src={hit.recipe.image} alt={hit.recipe.label} width="150" />
                            <p>来源：<a href={hit.recipe.url} target="_blank" rel="noopener noreferrer">{hit.recipe.source}</a></p>
                            <p>份量：{hit.recipe.yield} 份</p>
                            <p>饮食标签：{hit.recipe.dietLabels.join(', ')}</p>
                            <p>健康标签：{hit.recipe.healthLabels.join(', ')}</p>
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
}

export default GetRecipe;

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