时间戳

首页 > 解决方案 > React 错误：添加到 DOM 节点时，对象作为 React 子节点无效

reactjs - React 错误：添加到 DOM 节点时，对象作为 React 子节点无效

问题描述

它在输出到控制台时以正确的格式输出数据。但是在添加到 DOM 时，它给出了以下错误，错误：对象作为 React 子项无效（找到：带有键 {street、suite、city、zipcode、geo} 的对象）。如果您打算渲染一组子项，请改用数组。

import React from "react";
    export default class Fetch extends React.Component {
      constructor() {
        super();
        this.state = { dataList: [] };
      }
    
      async componentDidMount() {
        let data = await fetch("https://jsonplaceholder.typicode.com/users");
    
        if (data.ok) {
          var fetchedData = await data.json();
          this.setState({ dataList: fetchedData });
        } else console.log("Error");
      }
    
      render() {
        return (
          <table>
            {this.state.dataList.map((item) => {
              return (
                <tr key={item.id}>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.username}</td>
                  <td>{item.email}</td>
                  <td>{item.address}</td>
                </tr>
              );
            })}
          </table>
        );
      }
    }

标签： reactjs

解决方案

问题出在这条线上<td>{item.address}</td>，它item.address是一个带有更深键值对的 JSON。

"address": {
  "street": "Kulas Light",
  "suite": "Apt. 556",
  "city": "Gwenborough",
  "zipcode": "92998-3874",
  "geo": {
    "lat": "-37.3159",
    "lng": "81.1496"
  }
}

这里的一个解决方案可以是使用它进行字符串化{JSON.stringify(item.address)}并打印它，完成这项工作，但它会很丑陋，手动使用每个键是可以接受的。

推荐阅读