使用地图方法在React中渲染JSON API [英] Rendering JSON API in react Using map method

问题描述

我在JSON对象/数组和map方法的语法和结构上遇到困难.我是React的新手，正在学习的初期.

I am having difficulty with the syntax and the structure of JSON objects/arrays and map method. I am new to React and on an initial stage of learning.

这是我在下面粘贴的JSON文件代码:

This is the JSON file code I pasted below:

[
  {
    "cloud":"Asia",
    "availability":{
      "last15Min":"100%",
      "last24Hour":"100%"
    },
    "data_centers":[
      {
        "title":"Bombay",
        "availability":{
          "last15Min":"100%",
          "last24Hour":"100%"
        }
      },
      {
        "title":"Bombay1",
        "availability":{
          "last15Min":"100%",
          "last24Hour":"100%"
        }
      }
    ]
  },
  {
    "cloud":"Europe",
    "availability":{
      "last15Min":"100%",
      "last24Hour":"100%"
    },
    "data_centers":[
      {
        "title": "Bombay",
        "availability": {
          "last15Min": "100%",
          "last24Hour": "100%"
        }
      },
      {
        "title":"Bombay1",
        "availability":{
          "last15Min":"100%",
          "last24Hour":"100%"
        }
      }
    ]
  }
]

到目前为止，这是我的代码:我想使用map方法渲染每个字段.正确的方法是什么?

Here is my code so far: I want to render each field using map method. What is the correct method to do that?

在componentDidMount中，我在console.log中得到响应 http://prntscr.com/i09rqt

In componentDidMount I am getting the response in console.log http://prntscr.com/i09rqt

  constructor(props) {
    super(props)
    this.state = {
      clouds:[]
    }
  }

  componentDidMount() {
    var url="<api url>";
    fetch(url)
      .then(response => {
        return response.json();
      }).then(d => {
          let clouds = d.map((cloudData)=>{
            return(
              <div>{cloudData}</div>
            )
        })
        this.setState({clouds: clouds});
          console.log("state", this.state.clouds)
    })
  }

  render() {
    return (
      <div>
        {
          this.state.clouds.map((cloud =>
            <th key="">
                {cloud}
            </th>
          ))
        }
      </div>
    );
  }

推荐答案

先前的答案几乎是正确的，正确修复提取将解决此问题.

Previous answer is almost correct, fixing the fetch correctly will solve the problem.

componentDidMount() {
  var url = "https://demo8192935.mockable.io/mockApi";
  fetch(url)
    .then(response => {
      return response.json();
    })
    .then(d => {
      this.setState({ clouds: d });
      console.log("state", this.state.clouds)
    })
    .catch(error => console.log(error))
}

render() {
  return (
    <div>
      {
        this.state.clouds.map(((cloud, index) =>
          <th key={`${cloud.cloud}${index}`}>
            <div>
              <div>
                {cloud.cloud}
                <div>
                  {
                    cloud.data_centers.map(d => (
                      <div>
                        {d.title}
                      </div>
                    ))
                  }
                </div>
              </div>
            </div>
          </th>
        ))
      }
    </div>
  );
}

这篇关于使用地图方法在React中渲染JSON API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！