React useState数据无法渲染：Order组件displayItem无内容显示问题

核心原因 #

你的displayItem函数中，items.map的箭头回调使用了大括号{}但没有显式返回JSX元素。当箭头函数用大括号包裹函数体时，不会自动返回值，所以map最终生成的是一个全为undefined的数组，自然无法渲染任何内容。

修复步骤 #

1. 修正map的返回逻辑
   两种方式任选其一：

   • 在大括号内添加return语句
   • 把大括号{}换成小括号()，利用箭头函数的隐式返回特性

2. 优化初始状态
   初始状态设为[{}]会导致组件第一次渲染时，map会遍历这个空对象，可能引发潜在问题，建议改为空数组[]。

3. 修正异步状态的日志问题
   setItems是异步操作，你在then里直接console.log(items)拿到的是更新前的旧状态。如果要查看最新的items，可以直接打印res.data，或者通过useEffect监听items的变化。

修复后的完整代码 #

import axios from 'axios'
import { useEffect, useState } from 'react'
import { Link } from "react-router-dom"

export default function Order() {
  // 初始状态改为空数组
  const [items, setItems] = useState([])

  const showItems = () => {
    axios('http://localhost:3001/viewOrder')
      .then((res) => {
        setItems(res.data)
        // 直接打印接口返回的数据，或者用useEffect监听items
        console.log(res.data)
      })
      .catch((error) => {
        console.log(error)
      })
  }

  function displayItem() {
    // 方式1：用小括号实现隐式返回
    return items.map((i) => (
      <div key={i._id}>
        <h5>{i.title} - {i.price}</h5>
        <Link to="/checkout" state={{id: i._id}}>
          <button>buy now</button>
        </Link>
      </div>
    ))

    // 方式2：显式添加return
    // return items.map((i) => {
    //   return (
    //     <div key={i._id}>
    //       <h5>{i.title} - {i.price}</h5>
    //       <Link to="/checkout" state={{id: i._id}}>
    //         <button>buy now</button>
    //       </Link>
    //     </div>
    //   )
    // })
  }

  useEffect(() => showItems(), [])

  return (
    <div>
      <h3>Orders</h3>
      {displayItem()}
    </div>
  )
}

额外建议 #

• 可以在渲染前判断items是否为空，添加加载状态或者空状态提示，提升用户体验：

  return (
    <div>
      <h3>Orders</h3>
      {items.length === 0 ? (
        <p>No orders found</p>
      ) : (
        displayItem()
      )}
    </div>
  )
  

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