React项目中如何通过axios GET请求从JSON中提取idrestaurant字段

修复步骤 #

1. 排查接口请求无返回问题

你没有给axios加错误捕获逻辑，无法判断是否是跨域、接口地址错误、服务异常导致的无返回，先修改App.js的useEffect代码：

useEffect(() => {
  axios.get('http://MadeUpURL-app.herokuapp.com/restaurants')
    .then((response) => {
      console.log('接口返回数据：', response.data)
      setRestaurants(response.data)
    })
    .catch(err => {
      console.error('接口请求失败：', err)
    })
}, []);

修改后打开控制台就能看到请求状态，如果报错是跨域，需要让后端接口加CORS响应头，或者本地开发配置代理。 #

2. 修复列表页餐厅组件不显示内容问题

你在Restaurants.js里调用Restaurant组件时只传了key，key是React内部用于列表渲染的特殊属性，不会传入组件的props，导致Restaurant组件拿不到任何餐厅数据。同时循环的key需要绑定在最外层的Link元素上，修改Restaurants.js代码：

import React from 'react'
import styles from './restaurants.module.css'
import Restaurant from './Restaurant'
import { Link } from 'react-router-dom'

const Restaurants = (props) => {
    return (
        <div className={styles.container}>
            <div className={styles.restaurantList}>
                {props.restaurants.map(restaurant => 
                    <Link to={`/restaurants/${restaurant.idrestaurant}`} key={restaurant.idrestaurant}>
                        <Restaurant 
                            img={restaurant.img}
                            name={restaurant.name}
                            type={restaurant.type}
                            pricelvl={restaurant.pricelvl}
                        />
                    </Link>
                )}
            </div>
        </div>
    )
}

export default Restaurants

3. 修复动态路由配置错误

你当前的子路由写的是固定路径，无法匹配不同的餐厅id，修改App.js的路由配置：

<Route path='/restaurants' element={<Restaurants restaurants={restaurants} />} >
  {/* 动态参数用:开头，自动继承父路由的/restaurants前缀 */}
  <Route path=":idrestaurant" element={<Restaurant restaurants={restaurants} />} />
</Route>

4. 适配详情页餐厅数据获取

如果需要在访问单个餐厅详情页时渲染对应数据，修改Restaurant.js，新增路由参数获取和数据匹配逻辑：

import React from 'react'
import { useParams } from 'react-router-dom'
import styles from './restaurant.module.css'

export default function Restaurant(props) {
  const { idrestaurant } = useParams()
  // 区分是列表项还是详情页，匹配对应餐厅数据
  const currentRestaurant = idrestaurant 
    ? props.restaurants?.find(item => item.idrestaurant === Number(idrestaurant))
    : props

  if (!currentRestaurant) return <div>暂无餐厅数据</div>

  return (
    <div className={styles.shop}>
      <div>
        <div><img src={currentRestaurant.img} className={styles.imageSize} alt={currentRestaurant.name} /></div>
        <div>
          <div className={styles.title}>{currentRestaurant.name}</div>
          <div className={styles.type}>{currentRestaurant.type}</div>
          <div className={styles.prange}>{currentRestaurant.pricelvl}</div>
        </div>
      </div>
    </div>
  )
}

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