通过包含来自消息的附加状态和结果的 JSON 数据进行映射

Question

我正在尝试使用此代码映射来自 React 的 JSON 数据...

import {useEffect,useState} from 'react'


function Tourapi() {

    const[tours,settour]=useState([])
    const[loading,setloading]=useState(true)

    useEffect(()=>{
        fetchtour()

    },[])

    const fetchtour= async()=> {
        const furl='https://www.natours.dev/api/v1/tours'
        const res = await fetch(furl)
        const data = await res.json()
      settour(data)
      setloading(false)
    }

  if(!loading)
  {
    return (
        <div>
         {tours.map((tour)=>(

<h3> {tour.name}</h3>
         ))}   
        </div>
    )
  }
  else
  {
      return <h3>LOADING.....</h3>
  }

  
}

export default Tourapi

但看起来 JSON 数据包含其他内容和数据数组，所以我如何通过映射来获取名称和描述等等...

我得到的错误是 TypeError: tours.map is not a function

JSON 数据以

开头

{"status":"success","results":10,"data":{"data":[{"startLocation":{"type":"Point","coordinates":[-80.185942,25.774772],"description":"Miami, USA","address":"301 Biscayne Blvd, Miami, FL 33132, USA"}

我的意思是我怎样才能摆脱 ("status":"success","results":10,"data":) 并获取数据本身，因为它不是我的 API控制响应

谢谢。

Answer 1

这就是您所需要的，希望对您有所帮助

import { useState, useEffect } from "react";
function TourAPI() {
  const [tours, settour] = useState([]);
  const [loading, setloading] = useState(true);

  useEffect(() => {
    fetchtour();
  }, []);

  const fetchtour = async () => {
    const furl = "https://www.natours.dev/api/v1/tours";
    const res = await fetch(furl);
    const data = await res.json();
    await settour(data.data.data);
    setloading(false);
  };

  if (!loading) {
    return (
      <>
        <div className="tour-section">
          {tours.map((tours, i) => {
            return <h3 key={i}>{tours.name}</h3>;
          })}
        </div>
      </>
    );
  } else {
    return <h3>LOADING.....</h3>;
  }
}
export default TourAPI;

我将向您介绍 data 中的内容，如果您 console.log(data) 在 fetchtour 中，它将包含一个包含属性的对象。是这样的

{status: 'success', results: 10, data: {data}}

因此，您想要在 data 中再访问一个 data 这将导致 console.log(data.data) 看看里面有什么。

它会像这样显示。

{data: Array(10)}

因此，data 键实际上在其中包含 data 的数组，data.data 包含一个包含 10 个索引的数组，如您所见。您也可以尝试在浏览器中查看，每个索引都将包含您想要的属性，即 name，以及您需要获取的更多属性，例如 location，等等。

所以请带我们到最后一个 data，如果你 console.log(data.data.data)，它将访问包含 10 个索引的 data，它将是一个数组 [...] 这样我们就可以使用 map.

这就是 setState tours

所需要的

因此，我们可以很好地使用 map，因为我们实际上能够通过包含索引的数组进行映射。并且不要忘记为地图内的每个 div 设置 key，否则您将从浏览器的控制台中发出警告。

我的英文不太好，所以我的解释可能有点难，但我希望你能明白这是怎么回事。

通过包含来自消息的附加状态和结果的 JSON 数据进行映射

Mapping through JSON data that contain additional status and results from messages

reactjs

json

mapping