如何渲染从 API ReactJS 获取的单个项目答案

【问题标题】：How do I render a single Item fetched from the API ReactJS如何渲染从 API ReactJS 获取的单个项目
【发布时间】：2021-12-02 19:22:08
【问题描述】：

我似乎不知道如何在我的屏幕上呈现该项目

它在我的控制台上

这是我的代码：

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


function JobList() {
    const [jobs, setJobs] = useState([])

    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])
                const allJobs = response.data.jobs

                setJobs(allJobs)
            })
            .catch(error => console.error(`Error: ${error}`));
    }


    return (
        <div className='container'>
            <h1>{jobs.title}</h1>
            
        </div>
    )
}

export default JobList

我认为这应该可行，但后来我认为我没有映射它，但我不想映射它，因为我想要该数组的第一项

【问题讨论】：

标签： reactjs rest axios

【解决方案1】：

您忘记将数组中的第一个元素分配给allJobs

你忘了 [0] 在最后... const allJobs = response.data.jobs[0]

【讨论】：

我的错，它起作用了，但是速度非常慢，我的意思是它加载得很晚

【解决方案2】：

如果你 console.log(jobs) 你可以看到你有一个包含 32 个对象的数组。

如果你想要列表中的第一项，试试这个：

<div className="container">
      {jobs.length > 0 && (
        <>
          <h1>{jobs[0].title}</h1>
          <h1>{jobs[0].company}</h1>
        </>
      )}
    </div>

【讨论】：

这给了我一个未定义的类型错误
是的，很抱歉我的错误，我编辑了我的答案。