通过包含来自消息的附加状态和结果的 JSON 数据进行映射
Mapping through JSON data that contain additional status and results from messages
我正在尝试使用此代码映射来自 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控制响应
谢谢。
这就是您所需要的,希望对您有所帮助
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
,否则您将从浏览器的控制台中发出警告。
我的英文不太好,所以我的解释可能有点难,但我希望你能明白这是怎么回事。
我正在尝试使用此代码映射来自 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控制响应
谢谢。
这就是您所需要的,希望对您有所帮助
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
,否则您将从浏览器的控制台中发出警告。
我的英文不太好,所以我的解释可能有点难,但我希望你能明白这是怎么回事。