时间戳

首页 > 解决方案 > 如何在 React 中使用 axios 仅在单独的组件中呈现一个结果？

reactjs - 如何在 React 中使用 axios 仅在单独的组件中呈现一个结果？

问题描述

编辑//

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

我是 React 的新手（可能是 JavaScript，我不知道了）。我正在学习一个教程——我决定分支并使用 axios.get() 从 API 获取数据，而不是使用 npm 包作为 API。我能够将组件的结果呈现到浏览器中，但是在添加到达路由器（我假设它类似于 React 路由器）之后，我无法将我的 API 调用的一个结果呈现为我尝试的页面build 应该只根据我定义的 ID 显示一个结果。

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

我如何在 Results.js 中使用 axios

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);
      });
  }

我如何尝试在 Details.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 以及 axios，并呈现与 id 相关的公园详细信息。但是现在，它什么也没做，我一直坚持这一点:(

标签： reactjsaxiosstatereach-router

解决方案

我相信这是你弄错的部分

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

推荐阅读