JS/React中访问嵌套JSON数据并遍历渲染列表的实现问题

核心逻辑说明 #

不需要通过固定索引取单条数据，只要保持jobs状态为接口返回的完整results数组，即可通过Array.map遍历所有条目渲染。 #

第一步：保持reducer的数组赋值逻辑 #

GET_DATA分支不要修改为取单值的写法，保留完整数组赋值：

case ACTIONS.GET_DATA:
  return { ...state, loading: false, jobs: action.payload.jobs.results}

第二步：在业务组件中遍历数组渲染 #

调用自定义Hook拿到状态后，直接对jobs数组调用map方法，将单条数据的字段作为props传入独立职位组件：

// 职位列表组件示例
import useFetchJobs from './useFetchJobs'
import JobCard from './JobCard'

export default function JobList() {
  const { jobs, loading, error } = useFetchJobs()

  if (loading) return <div>加载中</div>
  if (error) return <div>请求失败</div>

  return (
    <div className="job-container">
      {jobs.map((job) => (
        <JobCard
          key={job.id}
          id={job.id}
          title={job.title}
          description={job.description}
          // 其余需要的字段直接从当前遍历项job上取即可
        />
      ))}
    </div>
  )
}

第三步：单条职位组件接收props渲染 #

独立的职位卡片组件接收传入的字段直接渲染即可：

// 单条职位组件JobCard示例
export default function JobCard({ id, title, description }) {
  return (
    <div className="job-card">
      <h3>{title}</h3>
      <p>职位ID：{id}</p>
      <div dangerouslySetInnerHTML={{ __html: description }} />
    </div>
  )
}

如果字段存在更深层级的嵌套，只需要对应调整属性访问路径即可，写法和你之前通过索引取单值的路径完全一致，只是把固定索引替换为map遍历的当前项对象。

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