React中使用Axios获取API JSON对象数据后渲染报错如何解决？

React 不支持直接将普通对象作为子元素渲染到 DOM 中。你当前代码的 render 方法内直接书写了 <p>{ post }</p>，而调用接口后拿到的 post 是包含 userId、id、title、body 四个属性的对象，不符合 React 可渲染内容的要求，因此触发该报错。另外你初始化 state 时将 post 设为空数组，和后续接口返回的对象类型不匹配，属于隐性的类型不统一问题。

按照以下步骤调整即可：

• 修正 state 初始值，匹配后续返回的对象类型，可额外增加加载状态避免接口返回前访问属性报错
• 渲染时不要直接输出整个 post 对象，按需取出要展示的属性单独渲染

修复后的完整代码如下：

import React, { Component } from "react";
import axios from "axios";

class Home extends Component {
  state = {
    post: null,
    isLoading: true
  }
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts/1")
    .then(res => {
      this.setState({
        post: res.data,
        isLoading: false
      })
    })
  }
  render() {
    const { post, isLoading } = this.state;

    if (isLoading) {
      return <p>加载中...</p>
    }

    return (
      <div>
        <p>用户ID：{post.userId}</p>
        <p>文章ID：{post.id}</p>
        <h2>标题：{post.title}</h2>
        <p>正文：{post.body}</p>
      </div>
    )
  }
}

export default Home;

如果只是需要调试查看完整对象内容，也可以直接将对象转为字符串后输出，写法为 <p>{JSON.stringify(post, null, 2)}</p>，正式业务场景下还是建议按需取属性渲染。

内容的提问来源于stack exchange，提问作者flinch85