错误：对象无效作为React子级（Axios和openweathermap API）

Posted 2021-04-13

我正在尝试渲染从openweathermap获取的数据，但我不断收到以下错误：

对象无效作为React子对象（找到：具有键{coord，weather，base，main，visibility，wind，clouds，dt，sys，id，name，cod}的对象）。如果您要渲染子集合，请使用数组。

import React from 'react';
import axios from 'axios';

class PersonList extends React.Component {
  state = {
    persons: []
  };

  componentDidMount() {
    axios
      .get(
        `https://api.openweathermap.org/data/2.5/weather?q=Toronto&appid=abdeb978cd944502164274a08638f7ac`
      )
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      });
  }

  render() {
    return <div>{this.state.persons}</div>;
  }
}

export default PersonList;

答案

首先，将json从响应转换为对象

  componentDidMount() {
    axios.get(`https://api.openweathermap.org/data/2.5/weather?q=Toronto&appid=abdeb978cd944502164274a08638f7ac`)
      .then(res => res.json())
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

第二，Objects are not valid as a React child (found: object with keys {coord, weather, base, main, visibility, wind, clouds, dt, sys, id, name, cod})意味着{ this.state.persons }是实际的和物体coord，weather，base，main，visibility，wind，clouds，dt，sys，id，name和cod。而你无法渲染一个物体。

要查看对象中的内容，您可以执行类似的操作

  render() {
    return (
      <div>
         { JSON.stringify(this.state.persons) }
      </div>
    );
  }

这会将对象转换为字符串，您可以渲染一个字符串，这样您就可以看到this.state.persons中的所有内容。

现在您需要向我们提供您想要对该数据执行的操作，因为要显示许多属性以及您可以执行的很多操作。

编辑：正如评论中所说，渲染weather，你可以做到

  render() {
    return (
      <div>
         { this.state.persons.weather }
      </div>
    );
  }

但是你需要确保weather是一个字符串，否则，它将导致相同的错误。

此外，您需要将qazxsw poi的初始状态更改为对象（也许您应该重命名该变量）。

改变这个：

persons

对此：

state = {
    persons: []
}

您还可以在从中渲染内容之前检查state = { persons: {} } 是否不是空对象。