javascript - 在 Componente 状态下保存并从 API 调用中获取对象

Question

我正在开始使用 React，我试图调用一个返回对象的 api，然后通过将结果保存在状态中来打印结果。但对于消息所说的内容，我在状态初始化中遗漏了一些东西。

这就是我正在做的事情:

const apiAddress = 'https://jsonplaceholder.typicode.com/posts/1';
class Caller extends React.Component {
  constructor(props) {
        super(props)
      this.state = { scene: ""}
  }
  ComponentWillMount () {
    fetch(apiAddress)
      .then((response) => {
        return response.json()
      })
      .then((resource) => {
        console.log(resource);
        this.setState({ scene: resource })
      });
  }
  render() {
    return (
      <div>
        Res: {this.state.scene}
      </div>
    )
  }
}

ReactDOM.render(
  <Caller />,
  document.getElementById('root')
);

响应是这个对象:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

我得到的错误是这个:

Objects are not valid as a React child (found: object with keys {userId, id, title, body}). If you meant to render a collection of children, use an array instead.

Answer 1

看起来你正在尝试渲染一个原始对象，我认为在 React 中渲染子对象时这是无效的。

尝试单独打印对象值:

...
render() {
    const { userId, id, title, body } = this.state.scene
    return (
      <>
        <div> User ID: {userId}</div>
        <div> Id: {id}</div>
        <div> Title: {title}</div>
        <div> Body: {body}</div>
      </>    
   )
}
...