ReactJS 中如何渲染从 API 接口获取的单条数组数据项

• 你定义的jobs状态是数组类型，初始值为空数组，直接读取jobs.title是读取数组本身的title属性，不存在该属性所以渲染为空
• 接口请求是异步操作，组件首次渲染时接口还没返回数据，直接访问数组第一个元素的属性会抛出undefined错误

二选一即可： #

方案1：状态直接存储第一个职位对象 #

修改getJobs里的赋值逻辑，把数组第一个元素存到状态中：

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import 'bootstrap/dist/css/bootstrap.min.css';


function JobList() {
    // 初始值设为null，标识还没拿到数据
    const [job, setJob] = useState(null)

    useEffect(() => {
        getJobs()
    }, [])

    const getJobs = () => {
        axios.get('https://staging.mapout.com/mapout-node/joblist/monster-jobs', {params: {keyword: 'developer', location: 'india'}})
            .then(response => {
                console.log(response.data.jobs[0])
                // 直接存储第一个元素
                setJob(response.data.jobs[0])
            })
            .catch(error => console.error(`Error: ${error}`));
    }


    return (
        <div className='container'>
            {/* 先判断job存在再读取属性，避免报错 */}
            <h1>{job?.title}</h1>
        </div>
    )
}

export default JobList

方案2：保留数组存储逻辑，渲染时读取第一个元素 #

不用修改状态和赋值逻辑，仅修改渲染部分的取值：

return (
    <div className='container'>
        {/* 可选链读取第一个元素的title，空数组时不会报错 */}
        <h1>{jobs[0]?.title}</h1>
    </div>
)

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