javascript - react -dom.development.js :55 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys

Question

我在这里非常困惑，我正在尝试遵循此question但不断收到错误对象作为 react 子项无效。或者属性未定义。

API 响应应类似于 [{id:1, name:hugo}, {id:2, name:sally}]

是什么导致了这些错误，为什么组件不会挂载生命周期组件并更改 onload 状态。

为什么如果我尝试 console.log 其结果，我会得到未定义的结果。

import React, { Component } from 'react';
import { Button, Form } from "semantic-ui-react";
import { api31Call } from '../helpers';
import ItemLister from './ItemLister';

export default class PulseInputForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],
        }
    }

    fetchData = () => {
      api31Call('GET', '/projects')
      .then(data => {
        this.setState({
          loading: false,
          data: data
        })
      })
    }

    componentWillMount() {
      this.setState({loading: true})
      this.fetchData()
      }

    render() {          
      return(
      <div>
      {this.state.data.map((object, index) => (
          <p key={index}>{object}</p>
        ))}
       </div>
      )  
      }
}

Answer 1

您无法渲染对象。您只能显示文本。

{this.state.data.map((object, index) => (
          <p key={index}>{object}</p>
        ))}
       </div>
      )  

代码中的object表示数组中的每一项，例如{id:1, name:hugo}

所以，我认为 name 就是您想要显示的内容。请使用object.name来显示每个名称

并且您不应该在key中使用索引。最好在数据中使用主键，例如 id

像这样改变

{this.state.data.map((object) => (
          <p key={object.id}>{object.name}</p>
        ))}