React中setState渲染报错：Objects are not valid as a React child求助

错误根源 #

你遇到的错误并不是setState环节的问题，而是直接在JSX中渲染了block.data这个对象。React不允许直接将对象作为子元素渲染，只能渲染字符串、数字、React元素或数组这类可渲染类型。

另外你的空值判断逻辑存在漏洞：如果block.data是对象，它没有length属性，block.data.length === 0会返回false，导致错误地进入渲染对象的分支。

解决方案 #

1. 将对象转为JSON字符串渲染

如果只需要展示block.data的结构，直接用JSON.stringify()把对象转成格式化的字符串：

<div className="bg-info p-2 ">
  <h3>
    Data: {
      (Array.isArray(block.data) ? block.data.length === 0 : Object.keys(block.data).length === 0)
        ? "{Empty}"
        : JSON.stringify(block.data, null, 2)
    },
  </h3>
</div>

JSON.stringify的第三个参数2是缩进空格，让输出的字符串更易读。

2. 按需渲染对象属性（如果明确知道data的结构）

如果block.data有固定的属性，可以单独渲染每个属性，比如：

<div className="bg-info p-2 ">
  <h3>
    Data: {
      (Array.isArray(block.data) ? block.data.length === 0 : Object.keys(block.data).length === 0)
        ? "{Empty}"
        : (
          <div>
            <p>属性1: {block.data.prop1}</p>
            <p>属性2: {block.data.prop2}</p>
          </div>
        )
    },
  </h3>
</div>

3. 修正后的完整组件示例

import React, { Component } from "react";
import axios from "axios";
class Blocks extends Component {
  state = {
    blocks: []
  };
  async componentDidMount() {
    const response = await axios.get("http://localhost:3000/api/blocks");
    console.log(response.data);
    this.setState({ blocks: response.data });
  }
  render() {
    return (
      <>
        <div className="container bg-warning rounded-2 pb-2">
          <h2 className="m-3">Blocks</h2>
          {this.state.blocks.map((block, index) => {
            const isDataEmpty = Array.isArray(block.data) 
              ? block.data.length === 0 
              : Object.keys(block.data).length === 0;
            return (
              <div key={index} className="container-fluid mb-3">
                <div className="bg-light p-2 rounded-top">
                  <h3>Timestamp: {block.timeStamp},</h3>
                </div>
                <div className="bg-info p-2 ">
                  <h3>hash: {block.hash},</h3>
                </div>
                <div className="bg-info p-2 ">
                  <h3>Lasthash: {block.lastHash},</h3>
                </div>
                <div className="bg-info p-2 ">
                  <h3>
                    Data: {isDataEmpty ? "{Empty}" : JSON.stringify(block.data, null, 2)},
                  </h3>
                </div>
                <div className="bg-info p-2 ">
                  <h3>difficulty: {block.difficulty},</h3>
                </div>
                <div className="bg-info p-2 rounded-bottom">
                  <h3>nonce: {block.nonce},</h3>
                </div>
              </div>
            );
          })}
        </div>
      </>
    );
  }
}

export default Blocks;

注意给map生成的元素添加key属性，避免React的列表渲染警告。

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