Question

所以我对此很新。我想将一个外部json文件加载到react中，然后使用它。

问题显然是json还没有加载，所以我得到错误。与Cannot read property 'map' of undefined等一样console.log给：

1
3
Uncaught TypeError: Cannot read property 'map' of undefined

所以我读过这与异步事情有关。但我找不到任何关于如何解决它的例子。或者如何使它工作。

我真的很感激看到这样一个小例子，让它发挥作用。

稍后我希望能够使用<input type=text etc＆gt;过滤json。用某种动态搜索。但首先要做的事情。那么有人可以帮助我吗？

这是我的简单文件：

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

class App extends Component {

  constructor(){
    super();
    this.state = {
      data: []
    };
    console.log('1');
  };

  componentDidMount() {
    fetch("http://asite.com/file.json")
    .then( (response) => {
      return response.json() })
    .then( (json) => {
      this.setState({data: json});
      console.log('2');
    })
  };

  render() {
    console.log("3");
    return(
      <div className="Employee">
      {
        this.state.data.employees.map(function(employee) {
          return (
            <div>
            <h1> {employee.name} </h1>
            </div>
          )
        })
      }
      </div>
    )
  }
}

export default App;

Answer 1

由于你有this.state.data.employees，我认为你想要像这样塑造初始状态：

constructor(){
  super();
  this.state = {
    data: {
      employees: []
    }
  };
};

Answer 2

您可以选择将另一个变量保存到状态，当您知道已加载数据时，该变量会被翻转，或者只是在尝试映射之前检查以确保数据存在。

后者可以像下面这样完成：

 <div className="Employee">
  { this.state.data.employees &&
    this.state.data.employees.map(function(employee) {
      return (
        <div>
        <h1> {employee.name} </h1>
        </div>
      )
    })
  }
  </div>

或者您可以调整初始状态以包含返回的空（但已初始化）版本，例如：

this.state = {
  data: { employees: [] }
};

检查以确保状态包含您正在映射的数据字段更安全，尽管返回不包括该字段。

在React

2 个答案: