React中API返回单个Workout对象时map方法失效求助

核心错误 #

你调用map()的对象是单个JSON对象（resp.workout），但map()是JavaScript数组的专属方法，只有数组才能调用。直接对单个对象用map()自然不会生效。

你尝试用Object.entries(resp.workout)得到的是对象的键值对数组（比如[["id", "1"], ["goalid", "3"], ...]），遍历的是每个键值对，不是你需要的整个workout数据结构，所以也不符合需求。

解决方法 #

根据你的需求，有两种处理方式：

方式1：直接渲染单个workout对象 #

既然API只返回一个workout，没必要用map()，直接读取对象属性渲染即可：

// 假设你用useState保存数据：const [workout, setWorkout] = useState({})
// 请求成功后：setWorkout(resp.workout)

return (
  <div className="col-md-4">
    <div className="card card-cascade wider" style={{ display: "flex", justifyContent: "start" }}>
      <div className="view view-cascade overlay">
        <img className="card-img-top" src={workout.image} alt="Card image cap"/>
        <a href="#!">
          <div className="mask rgba-white-slight"></div>
        </a>
      </div>
      <div className="card-body card-body-cascade text-center pb-0">
        <h5 className="card-title">id:{workout.id}</h5>
        <h5 className="card-title">goalid:{workout.goalid}</h5>
        <h5 className="card-title">levelid:{workout.levelid}</h5>
        <h5 className="card-title">workname:{workout.workname}</h5>
        <h5 className="card-title">dow:{workout.dow}</h5>
        <h5 className="card-title">goal_name:{workout.goal_name}</h5>
        <h5 className="card-title">level_name:{workout.level_name}</h5>
        <h5 className="card-title">fav_status:{workout.fav_status}</h5>
       
        <div className="card-footer text-muted text-center mt-4">
          2 days ago
        </div>
      </div>
    </div>
  </div>
)

方式2：将单个对象转为数组后用map() #

如果后续API可能返回多个workout，或者你想统一用数组的方式处理，可以把单个对象放进数组再保存：

// 请求成功后：setData([resp.workout]) // 把单个对象包装成数组

// 然后正常使用map()
{data?.map((element, i) => {
  return (
    <div className="col-md-4" key={i}>
      <div
        className="card card-cascade wider"
        style={{ display: "flex", justifyContent: "start" }}
      >
        <div className="view view-cascade overlay">
          <img className="card-img-top" src={element.image} alt="Card image cap"/>
          <a href="#!">
            <div className="mask rgba-white-slight"></div>
          </a>
        </div>
        <div className="card-body card-body-cascade text-center pb-0">
          <h5 className="card-title">id:{element.id}</h5>
          <h5 className="card-title">goalid:{element.goalid}</h5>
          <h5 className="card-title">levelid:{element.levelid}</h5>
          <h5 className="card-title">workname:{element.workname}</h5>
          <h5 className="card-title">dow:{element.dow}</h5>
          <h5 className="card-title">goal_name:{element.goal_name}</h5>
          <h5 className="card-title">level_name:{element.level_name}</h5>
          <h5 className="card-title">fav_status:{element.fav_status}</h5>
         
          <div className="card-footer text-muted text-center mt-4">
            2 days ago
          </div>
        </div>
      </div>
    </div>
  );
})}

这样就能正常触发map遍历，渲染出对应的卡片了。

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