Reactjs 需要帮助获取与Axios相关的json数据以进行react吗_Reactjs_Axios

Reactjs 需要帮助获取与Axios相关的json数据以进行react吗

reactjs

Reactjs 需要帮助获取与Axios相关的json数据以进行react吗,reactjs,axios,Reactjs,Axios,我需要帮助使用axios依赖于react。我正在从此终结点获取数据：我为我的API（config.jsx）设置了一个配置然后我在我的应用程序中调用它（一个类组件）作为API 并在我的组件didmount（）中执行它我获取数据，将其存储在名为“covid”的状态中，但当涉及到映射结果时，我会得到一个错误“TypeError无法读取null的属性“map”。我想我必须将数据转换为数组，但我不知道如何做 render() { return ( <div classNa

我需要帮助使用axios依赖于react。我正在从此终结点获取数据：

我为我的API（config.jsx）设置了一个配置

然后我在我的应用程序中调用它（一个类组件）作为API

并在我的组件didmount（）中执行它

我获取数据，将其存储在名为“covid”的状态中，但当涉及到映射结果时，我会得到一个错误“TypeError无法读取null的属性“map”。我想我必须将数据转换为数组，但我不知道如何做

render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>{this.state.appliname}</h1>

          {this.state.covid.map(item => (
            <div>{item.Country}</div>
          ))}

        </header>
      </div>
    );
  }

render（）{
返回(
{this.state.appliname}
{this.state.covid.map（项=>(
{项目.国家}
))}
);
}

以下是codesandbox上的完整脚本：

谢谢

设置初始状态默认数组

this.state={covid:[]，appliname:“CovidFacts”}

设定国家

关注所有人：

import React from "react";
import "./App.css";
import API from "./config.jsx";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      covid: [],
      appliname: "CovidFacts"
    };
  }

  componentDidMount() {
    API.get().then(res => {
      const countries = res.data.Countries;
      this.setState({ covid: countries });
      console.log(`Etat du state:  ${this.state.covid}`);
    });
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>{this.state.appliname}</h1>
          {this.state.covid.map(item => (
            <div>{item.Country}</div>
          ))}
        </header>
      </div>
    );
  }
}

export default App;

从“React”导入React；
导入“/App.css”；
从“/config.jsx”导入API；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
新冠病毒：[]，
appliname：“CovidFacts”
};
}
componentDidMount（）{
API.get（）.then（res=>{
const countries=res.data.countries；
这个国家（{covid:countries}）；
log（`Etat du state:${this.state.covid}`）；
});
}
render（）{
返回(
{this.state.appliname}
{this.state.covid.map（项=>(
{项目.国家}
))}
);
}
}
导出默认应用程序；

设置初始状态默认数组

this.state={covid:[]，appliname:“CovidFacts”}

设定国家

关注所有人：

import React from "react";
import "./App.css";
import API from "./config.jsx";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      covid: [],
      appliname: "CovidFacts"
    };
  }

  componentDidMount() {
    API.get().then(res => {
      const countries = res.data.Countries;
      this.setState({ covid: countries });
      console.log(`Etat du state:  ${this.state.covid}`);
    });
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>{this.state.appliname}</h1>
          {this.state.covid.map(item => (
            <div>{item.Country}</div>
          ))}
        </header>
      </div>
    );
  }
}

export default App;

从“React”导入React；
导入“/App.css”；
从“/config.jsx”导入API；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
新冠病毒：[]，
appliname：“CovidFacts”
};
}
componentDidMount（）{
API.get（）.then（res=>{
const countries=res.data.countries；
这个国家（{covid:countries}）；
log（`Etat du state:${this.state.covid}`）；
});
}
render（）{
返回(
{this.state.appliname}
{this.state.covid.map（项=>(
{项目.国家}
))}
);
}
}
导出默认应用程序；

您需要考虑以下几点：

始终处理承诺中的错误。有时您可能会面临API失败，因此如果API请求失败，您应该处理我们应该做的事情。因此，只需在承诺链中添加一个处理程序

您应该始终处理第一次数据启动。在页面的第一次呈现中，没有

this.state.covid

，因此无法将其传递到视图并通过其进行映射，因此如果执行此操作，将抛出错误。要使此工作正常，您应该添加到元素中

正确定义您的第一次状态启动。由于您希望您的

this.state.covid

是一个数组，因此首先应该将其定义为一个数组（

this.state={covid:[]}

）

避免将s传递给。当您尝试使用

JSON.stringify（res.data.Countries）

将传入的项目从API转换为JSON时，它将使您的数据成为JSON。由于JSON带有字符串类型，因此它不适合像

array#map

这样的数组帮助程序，当您获得数据时，无需使用JSON。如果在任何情况下，您的传入数据是JSON本身，那么您应该使用它进行解析

工作演示：