通过提取获取请求并做出反应

Question

这可能是一个非常愚蠢的问题，但是我在网络上找不到任何解决方案，请不要害我。 我设置了一个create-react-app，并希望在表中显示一些数据。

这是我的JSON：

[ {
  "unitid" : 29,
  "createddate" : 1510324778000,
  "latitude" : 49.402008056640625,
  "longitude" : 11.901968002319336,
  "senderid" : 6,
  "signalstrength" : 37
}, {
  "unitid" : 34,
  "createddate" : 1510563384000,
  "latitude" : 49.22679901123047,
  "longitude" : 12.845210075378418,
  "senderid" : 8,
  "signalstrength" : 0
},......

而且我的表需要具有所有属性的JSON数组，以便正确显示每一列。

这是我尝试从我的端点获取数据的代码：

class App extends Component {
constructor(props){
    super(props);

    this.state = {
        vehicleList: [],
    };
}

componentDidMount(){
    fetch('endpoint-link', {mode: 'no-cors', method: 'get'})
        .then(response => response.json())
        .then(result => {
            this.setState({vehicleList: result.vehicleList})
            console.log(result)
        })

        .catch(error => {
            this.setState({isLoaded: true, error})
            console.log(error)
        });
}

render() {
    const {vehicleList} = this.state;
    console.log(vehicleList);.......

当我在Chrome中打开Devtools时，转到“网络”，我可以看到端点已知并且找到了数据，但是以某种方式fetch方法没有将JSON加载到Array中。

Answer 1

您的JSON没有vehicleList属性。 它只有一系列的车辆。 因此，您需要将其置于您的状态：

this.setState({vehicleList: result})

Answer 2

问题是这样的-> ...{mode="no-cors"...}请查看此帖子以进行修复： 处理响应-SyntaxError：输入的意外结束