Question

我有以下JSON数据：

[
{"ID":1,"Latitude":"-41.276253","Longitude":"173.283842","Image":"Church.jpg"},
{"ID":2,"Latitude":"-41.267783","Longitude":"173.279114","Image":"Centre.jpg"}
]

我正在尝试导入它，以便可以渲染＆amp;从以下代码开始：

  componentDidMount() {
    fetch('/home/briefsJson').then(response => response.json()).then(data => {
      console.log(data);
      this.setState({
        latitude: data.Latitude, 
        longitude: data.Longitude, 
        image: data.Image
      });
    });
  }

这不是因为数据是多维/嵌套的。但我发现的每个例子都是使用更高级别名称的结构化数据。

我如何使用setState＆amp;渲染以显示此数据？

Answer 1

首先构建你想要的东西可能会更容易，然后在渲染中进行映射。看起来你甚至不需要做任何事情来转换它，因为json数据正是你想要的第一个。所以：

componentDidMount() {
    fetch('/home/briefsJson').then(response => response.json()).then(data => {
        console.log(data);
        this.setState({ data });
    });
}

render() {
    return (
        <div>
            {this.state.data.map(datum => (element))}
        </div>
    );
}

Answer 2

如果你想从js文件导入json，你可以这样做。

Data.js

const Data = [
{"ID":1,"Latitude":"-41.276253","Longitude":"173.283842","Image":"Church.jpg"},
{"ID":2,"Latitude":"-41.267783","Longitude":"173.279114","Image":"Centre.jpg"}
]

export default Data

然后将其导入您想要使用它的位置。现在，您可以根据需要映射数据。

App.js

import Data from './data'
import React, {Component} from 'react'
class App extends Component {
state = { Data:[] }
componentDidMount() { this.setState({ Data: Data }) }
render() {
 return(
   <div> {this.state.Data.map(item => <div> The id is: {item.ID} </div> }</div> 
  )
 }
}

也许您想要更改项目的名称，并返回具有较少属性的新数据结构，这就是您要执行此操作的方式。

componentDidMount() {
    fetch('/home/briefsJson').then(response => response.json()).then(data => {
      const newData = data.map(item => {
       latitude:item.Latitude, 
       longitude: item.Longitude, 
       image: item.Image}
      }
      this.setState({
       Data:newData
      });
    });
  }

现在，如果您想在渲染中显示此数据。

renderData = () => { 
 return (
 <div> 
 {this.state.Data.map(item => (
  <div> 
   {item.latitude} 
   {item.longitude} 
   <img src={item.img} />
  </div>
 )} 
 </div> 
 )
}

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

如何在具有空顶级名称的嵌套数据上使用React SetState？

2 个答案: