如何在 React 中使用 axios 只在单独的组件中渲染一个结果?

Question

编辑//

我想我的问题不是那么清楚。当我的网址指向 http://localhost:1233/details/'${parkcode}'时，我试图返回一个公园。我已经在我的结果.js文件中定义了 url 的参数。但是我在定义 this.setState 时遇到了麻烦.js根据 id 只呈现公园的一个结果，这也恰好是公园代码。

我是 React 的新手(可能还有 JavaScript，我再也不知道了)。我正在遵循一个教程 - 而不是将 npm 包用于 API，我决定分支并使用 axios.get() 从 API 获取数据。我能够将组件中的结果渲染到浏览器中，但是在 reach-router 上添加后(我假设它类似于 React Router)，我在渲染我的 API 调用的一个结果时遇到了麻烦，因为我尝试构建的页面应该只显示一个基于我定义的 ID 的结果。

在我的主文件(即 Results.js 中，我能够毫无问题地获取数据，并使用 JSX 将它们包含在我的文件中并呈现它们。我正在尝试使用与我在 Details.js 页面(该页面应该只向路由中的 ID 显示一个结果)中在该页面中所做的相同逻辑。

我如何在结果中使用公理.js

componentDidMount() {
axios
.get(
"https://developer.nps.gov/api/v1/parks?stateCode=wa&fields=images&api_key=" +
`${nps}`
)
// https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/
.then(res =>
res.data.data.map(park => ({
description: `${park.description}`,
fullname: `${park.fullName}`,
states: `${park.states}`,
parkcode: `${park.parkCode}`,
image: `${park.images[0] ? park.images[0].url : "No Image"}`,
designation: `${park.designation}`
}))
)
.then(parks => {
this.setState({
parks
});
console.log(parks);
});
}

我如何尝试在详细信息中使用相同的逻辑.js

即使我进行了 API 调用，它也无法识别 park.name。但是，如果我硬编码 park[0].name，它可以工作。我不知道我在这里做错了什么。这可能是一个明显的问题，但请帮助我。

class Details extends React.Component {
constructor (props) {
super(props);
this.state = {
loading: true,
}
}
componentDidMount() {
axios
.get(
"https://developer.nps.gov/api/v1/parks?stateCode=wa&fields=images&api_key=" +
`${nps}`, 
{ id: this.props.id }
).then(res => {
const park = res.data.data.map(park => ({
description: `${park.description}`,
fullname: `${park.fullName}`,
states: `${park.states}`,
parkcode: `${park.parkCode}`,
image: `${park.images[0] ? park.images[0].url : "No Image"}`,
designation: `${park.designation}`
}))
console.log(park.name);
this.setState({
name: park.name;
loading: false
})
}).catch(err => {
this.setState({error: err});
})
}

我希望页面能够识别 GET 请求中定义的 id 以及公理，并呈现与 id 相关的公园详细信息。但是现在，它什么也没做，我一直被困在这个上面:(

Answer 1

代码中有一些不必要的部分。您不需要像在setState部分中那样构建数据。您正在获得公园列表，它已经是结构化数据。因此，只需使用返回的数据设置状态即可。

之后，您可以映射此数据并使用 React 路由器的链接渲染公园。您可以使用parkCode作为Link的 URL 参数。Details组件中，您可以提取此parkCode并发出新的公园详细信息请求，然后将其设置为您的状态。

我举个例子。

索引.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Results from "./Results";
import Details from "./Details";
const Routes = () => (
<Router>
<Switch>
<Route exact path="/" component={Results} />
<Route path="/details/:parkCode" component={Details} />
</Switch>
</Router>
);
ReactDOM.render(<Routes />, document.getElementById("root"));

结果

import React from "react";
import axios from "axios";
import { Link } from "react-router-dom";
class Results extends React.Component {
state = {
parks: [],
loading: true,
};
componentDidMount() {
axios(
"https://developer.nps.gov/api/v1/parks?stateCode=wa&fields=images&api_key=LbqZVj21QMimfJyAHbPAWabFaBmfaTZtseq5Yc6t"
).then(res => this.setState({ parks: res.data.data, loading: false }));
}
renderParks = () =>
this.state.parks.map(park => (
<Link to={`/details/${park.parkCode}`} key={park.parkCode}>
<div>{park.fullName}</div>
</Link>
));
render() {
return (
<div>{this.state.loading ? <p>Loading...</p> : this.renderParks()}</div>
);
}
}
export default Results;

详

import React from "react";
import axios from "axios";
class Details extends React.Component {
state = { park: "", loading: true };
componentDidMount() {
const { match } = this.props;
axios(
`https://developer.nps.gov/api/v1/parks?parkCode=${match.params.parkCode}&api_key=${nps}`
).then(res => this.setState({ park: res.data.data[0], loading: false }));
}
render() {
return (
<div>
{this.state.loading ? <p>Loading...</p> : this.state.park.description}
</div>
);
}
}
export default Details;

Answer 2

你可以在.then()中尝试这个

let park = res.data.data.map(park => ({
description: `${park.description}`,
fullname:    `${park.fullName}`,
states:      `${park.states}`,
parkcode:    `${park.parkCode}`,
image:       `${park.images[0] ? park.images[0].url : "No Image"}`,
designation: `${park.designation}`
}))
park = park[0]; // convert arrays of parks to single park
console.log(park.fullname); // now you can use `park.fullname`

或者这个

const park = {
description: `${res.data.data[0].description}`,
fullname:    `${res.data.data[0].fullName}`,
states:      `${res.data.data[0].states}`,
parkcode:    `${res.data.data[0].parkCode}`,
image:       `${res.data.data[0].images[0] ? park.images[0].url : "No Image"}`,
designation: `${res.data.data[0].designation}`
}
console.log(park.fullname); // now you can use `park.fullname`

否则在 API 中执行此操作

Answer 3

我认为您可以先为响应设置状态，然后尝试显示它们

同样这个：

state = {
result: []
}
componentDidMount() {
axios
.get("https://developer.nps.gov/api/v1/parks?stateCode=wa&fields=images&api_key=" +`${nps}`).then((res) => {
this.setState({result: res.data.data})
})
}
render(){
const result = this.state.result.map((el, index) => {
return(
//data
)
})
return(
<div>
{result}
</div>
)
}

Answer 4

我相信这是你弄错的部分

const parks = res.data.data.map(park => ({
description: `${park.description}`,
fullname: `${park.fullName}`,
states: `${park.states}`,
parkcode: `${park.parkCode}`,
image: `${park.images[0] ? park.images[0].url : "No Image"}`,
designation: `${park.designation}`
}))
console.log(parks) // this should display your array of all parks
this.setState({
parks,
loading: false
})
displayParks(parks) {
const allParks = parks.map((park, index) => {
return <div key={park.parkCode}>{park.fullname}<div>
})
}

render() {
const { parks } = this.state;
const displayParks = parks && parks.length > 0 ? this.displayParks(parks) : <div>Loading parks</div>
return (
<div>{ displayParks }</div>
);
}

当你在一个数组上做一个.map时，你基本上是在创建另一个数组，这就是返回到你的park变量的内容。

因此，在渲染方法中，您可以循环访问parks中的每个项