它显示错误 "Objects are not valid as a React child (found: object with keys {street, suite, city, zipcode, geo})."

Question

使用 React Hooks 系统从 json 占位符 api 成功获取用户数据后，我无法显示 table 中的记录。它显示错误 see the attached image for error

您可以查看此 link 上的代码：check out the code on codesandbox

请让我知道我哪里做错了。

Answer 1

您正在渲染 address 就好像它是一个字符串或 React 组件：

<td>{address}</td>

然而，它实际上是一个对象：

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },

您需要制作一个呈现 address 的组件或在呈现之前将其转换为字符串。

Answer 2

这是因为 address 是一个对象。而您正在尝试在 table 单元格中呈现一个对象。

请使用正确的键或将对象字符串化以呈现它。

<td>{JSON.stringify(address)}</td>

此外，下次请在问题正文中添加您的代码以及您尝试解决问题的步骤。

它显示错误 "Objects are not valid as a React child (found: object with keys {street, suite, city, zipcode, geo})."

It's showing an error "Objects are not valid as a React child (found: object with keys {street, suite, city, zipcode, geo})."

javascript

reactjs

axios

react-hooks

use-state