使用 map 方法在反应中渲染 JSON API

Posted 2023-02-22

【中文标题】使用 map 方法在反应中渲染 JSON API

【英文标题】：Rendering JSON API in react Using map method

【发布时间】：2018-06-23 08:01:47

【问题描述】：

我对 JSON 对象/数组和 map 方法的语法和结构有困难。我是 React 新手，处于学习的初始阶段。

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

[
  
    "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 方法渲染每个字段。 这样做的正确方法是什么？

在 componentDidMount 中，我在 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>
    );
  

【参考方案1】：

无需在componentDidMount 中返回html 元素。

试试这个：

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


componentDidMount() 
    var url = "http://trust.zscaler.com.test/sample-api/third-party-monitoring/availability.json";
    fetch(url)
        .then(response => 
            this.setState( clouds : response )
        ).catch(error => 
            console.log(error)
        )


render() 
    if (this.state.clouds && this.state.clouds.length > 0) 
        return (
            <div>
                
                    this.state.clouds.map((items =>
                        <th key="">
                            items.cloud
                        </th>
                    ))
                
            </div>
        );
    

    return null;

希望对你有所帮助。

【讨论】：

我收到这个类型错误 this.state.clouds.map is not a function

我已经通过在渲染函数中添加if 语句来更新代码。请获取最新的代码并再次检查。

感谢您的回答，但我也想打印“data_centers”。如何在 map 方法中使用 map –

【参考方案2】：

上一个答案几乎是正确的，正确修复 fetch 将解决问题。

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

【讨论】：

感谢您的回答，但我也想打印“data_centers”。如何在地图方法中使用地图

@Bhawna，我已经修改了代码以显示它是如何完成的。它只是为您展示如何嵌套地图的示例。我会建议您根据需要分离组件以获得更好的代码可读性。我想在这个答案中添加任何其他内容超出了您的问题范围。希望这能解决你所有的问题。