React中如何打印对象数组？附相关组件实现代码

看起来你已经通过getInitialProps获取到了以太坊合约返回的对象数组，接下来我会一步步教你怎么把这个数组渲染到页面上：

第一步：优化数据传递（可选但推荐） #

首先，先把getInitialProps里的变量名改得更清晰，同时把每个广告对应的地址绑定到对象里，方便后续渲染时用做唯一key：

static async getInitialProps(){
  const adAddresses = await factory.methods.getAdress().call();
  const uniqueAddresses = Array.from(new Set(adAddresses));
  // 用Promise.all替代for循环，并行请求提升性能
  const adsData = await Promise.all(
    uniqueAddresses.map(address => 
      factory.methods.getClientData(address).call().then(data => ({
        ...data,
        address // 把地址合并到数据对象中，后续用作唯一key
      }))
    )
  );
  console.log(adsData);
  return { adsData }; // 返回更清晰的变量名
}

第二步：渲染数组到页面 #

方式1：渲染成结构化UI（生产环境用） #

在render方法里，通过map遍历数组，把每个对象转换成对应的DOM元素，记得给每个元素加唯一的key属性（这里用我们绑定的address，因为它本身就是唯一的）：

class ShowAds extends Component { // 注意组件名首字母要大写，符合React规范
  // ...getInitialProps代码...

  render(){
    const { adsData } = this.props;

    // 处理数组为空的情况，避免空数组渲染出错
    if (!adsData || adsData.length === 0) {
      return <div className="empty-state">暂无广告数据</div>;
    }

    return (
      <div className="ads-container">
        {adsData.map(ad => (
          <div key={ad.address} className="ad-card">
            <h3>客户地址：{ad.address}</h3>
            <div className="ad-info">
              <p>客户名称：{ad.name}</p> {/* 替换成你合约返回的实际字段名 */}
              <p>广告内容：{ad.content}</p>
              {/* 其他需要展示的字段，根据合约返回数据调整 */}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

方式2：打印数组JSON结构（调试用） #

如果只是想在页面上查看数组的完整结构（比如调试阶段），可以用JSON.stringify配合<pre>标签格式化显示：

render(){
  const { adsData } = this.props;
  return (
    <pre>{JSON.stringify(adsData, null, 2)}</pre>
  );
}

<pre>标签会保留JSON的缩进格式，让数据结构更易读。

额外注意事项 #

• React组件名必须首字母大写，所以把showAds改成ShowAds，避免React将其识别为普通HTML标签。
• key属性必须是每个元素的唯一值，不要用数组索引（索引会在数组排序/删除时导致渲染异常），这里用以太坊地址是完美的选择。
• 确保渲染时使用的字段名和合约getClientData返回的字段完全一致，避免出现undefined。

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