Reactjs 如何在react.js中迭代api中的json数据

我刚刚开始学习React，并尝试循环处理JSON数据数组。然而，我得到了一些语法错误。我试图使用

array.map

函数，但它不能正常工作，而且我不确定如何实现它以使它显示JSON数组中的每个元素，而不仅仅是一个元素。非常感谢您的帮助-谢谢

import React, { Component } from 'react';
import axios from "axios";
import './App.css';

import UserForm from "./components/UserForm.js";

class App extends Component {
  state = {
    name: "",
    stars: "",
    icon: "",
    trails: [], isLoaded: false
  }
  getUser = (e) => {
    e.preventDefault();
    const address = e.target.elements.address.value;
    if (address) {
      axios.get(`https://www.hikingproject.com/data/get-trails?lat=40.0274&lon=-105.2519&maxDistance=10&key=200279581-dd891420fa2c470dbb683b34e017062a`)
        .then((res) => {
          console.log(res);
          const trailList = res.data.trails.map((trail) => {
            console.log(trail.name)
            console.log(trail.stars)
            return <div> <p>{trail.name}</p> </div>
          })

          this.setState({ trails: trailList, isLoaded: true });

          const name = res.data.trails.name;
          const stars = res.data.trails.stars;
          const icon = res.data.trails.imgMedium;
          this.setState({ name });
          this.setState({ stars });
          this.setState({ icon });
        })
    }

    else return;
  }
  render() {
    return (
      <div>
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">HTTP Calls in React</h1>
          </header>

          <UserForm getUser={this.getUser} />
        <div className="newmessage">
       {this.state.trails.map((obj) => {

         return( 
            <div>
            <p>{obj.name}</p> >
                    <p> {obj.stars}</p>
                       </div>
                    );
            }}
            </div>
          </div>
        </div>
      </div>
    );
  }
};

export default App;

import React，{Component}来自'React'；
从“axios”导入axios；
导入“/App.css”；
从“/components/UserForm.js”导入用户表单；
类应用程序扩展组件{
状态={
姓名：“，
星星：“，
图标：“”，
轨迹：[]，已加载：false
}
getUser=（e）=>{
e、 预防默认值（）；
const address=e.target.elements.address.value；
如果（地址）{
axios.get(`https://www.hikingproject.com/data/get-trails?lat=40.0274&lon=-105.2519&maxDistance=10&key=200279581-dd891420fa2c470dbb683b34e017062a`）
。然后（（res）=>{
控制台日志（res）；
const trailList=res.data.trails.map（（trail）=>{
console.log（trail.name）
console.log（trail.stars）
返回{trail.name}

})
this.setState（{trails:trailList，isLoaded:true}）；
const name=res.data.trails.name；
常数星=res.data.trails.stars；
const icon=res.data.trails.imgMedium；
this.setState（{name}）；
这个.setState（{stars}）；
这个.setState（{icon}）；
})
}
否则返回；
}
render（）{
返回(
React中的HTTP调用
{this.state.trails.map（（obj）=>{
报税表（
{obj.name}
>
{obj.stars}

);
}}
);
}
};
导出默认应用程序；

一个好的开始是使用

fetch

或

axios

在

componentDidMount

中获取数据。从未使用过axios，因此我将使用

fetch

回答这个问题

保持构造函数不变。然后编写一个

componentDidMount

，如下所示：

componentDidMount（）{
取（'https://www.hikingproject.com/data/get-trails?lat=40.0274&lon=-105.2519&maxDistance=10&key=200279581-dd891420fa2c470dbb683b34e017062a'）
.then（res=>res.json（））
.then（data=>this.setState（{trails:data.trails}））
.catch（e=>console.log（e））
}

然后在子渲染方法（例如

renderData

）中，编写以下代码：

renderData() {
    if (!this.state.trails) {
        return null;
    } 
    return this.state.trails.map(trail => <p>{trail.name}</p>);
}

---

这段代码已经在我的本地环境中进行了测试，并正常工作。

您能准确地指定您遇到的错误吗？语法错误。。。

render() {
    return (
        <div>{this.renderData()}</div>
    )
}