对象作为React子对象无效。如果要呈现子元素的集合，请使用数组

我正在设置一个带有Rails后端的React应用程序。我得到的错误“对象是无效的React子(发现:对象与键{id，名称，信息，created_at, updated_at})。如果你想呈现一组子元素，请使用数组。”

这是我的数据:

[
    {
        "id": 1,
        "name": "Home Page",
        "info": "This little bit of info is being loaded from a Rails 
        API.",
        "created_at": "2018-09-18T16:39:22.184Z",
        "updated_at": "2018-09-18T16:39:22.184Z"
    }
]

我的代码如下:

import React from 'react';

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      homes: []
    };
  }

  componentDidMount() {
    fetch('http://localhost:3000/api/homes')
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            homes: result
          });
        },
        // error handler
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {

    const { error, isLoaded, homes } = this.state;

    if (error) {
      return (
        <div className="col">
          Error: {error.message}
        </div>
      );
    } else if (!isLoaded) {
      return (
        <div className="col">
          Loading...
        </div>
      );
    } else {
      return (
        <div className="col">
          <h1>Mi Casa</h1>
          <p>This is my house y'all!</p>
          <p>Stuff: {homes}</p>
        </div>
      );
    }
  }
}

export default Home;

我做错了什么?

当前回答

只是添加到其他选项，我试图通过点方法访问主对象内的嵌套对象，如: this.state.arrayData.CompleteAdress.Location 在这种情况下，位置是完整地址内嵌套的对象，这就是为什么我不能简单地用点符号访问它。

因此，如果您面临同样的问题，请尝试JSON。解析，以便访问嵌套对象，然后进行相应操作。

2020-06-23 08:47:11

其他回答

好吧，在我的情况下，我想渲染的数据包含一个对象在数组中，因此，它会给出错误，所以对于其他人来说，请检查你的数据也一次，如果它包含一个对象，你需要将它转换为数组打印它的所有值，或者如果你需要一个特定的值，然后使用。

我的数据:

body: " d fvsdv"
photo: "http://res.cloudinary.com/imvr7/image/upload/v1591563988/hhanfhiyalwnv231oweg.png"
postedby: {_id: "5edbf948cdfafc4e38e74081", name: "vit"}       
//this is the object I am talking about.
title: "c sx "
__v: 0
_id: "5edd56d7e64a9e58acfd499f"
__proto__: Object

只打印单个值

<h5>{item.postedby.name}</h5>

2020-06-11 19:47:41

这个问题是因为您试图显示整个对象，而不是对象内部的键。

例如:数据是

[
    {
        "status": "success",
        "count": 20511
    },
    {
        "status": "failure",
        "count": 1776
    }
]

现在，在如下所示的组件中，这将工作。

import React, { Component } from 'react';


export default class Display extends Component {

    render() {

        const { data } = this.props;

        return (
            <>
           
               {
                   data.map((value,key)=>
                       <div>{value.status}</div>
                       <div>{value.count}</div>
                   )
               }
            </>

        )
    }
}

2021-08-19 17:13:20

因此，如果您面临同样的问题，请尝试JSON。解析，以便访问嵌套对象，然后进行相应操作。

2020-06-23 08:47:11

我也遇到过类似的问题，但我的这个方法奏效了。我的输出

但我犯的错误很简单。在我的内容是超过两个，我已经忘记包装作为一个数组。我没有给卡莉戴牙套。

import React from 'react'
import {Button} from './Button';
import {Link} from 'react-router-dom'
import './HeroSection.css';

function HeroSection({
    lightBg, topLine, lightText, lightTextDesc, headline, description, 
    buttonLabel, img,alt,imgStart}
) {
    return (
        <>
            <div className={lightBg? 'home__hero-section': 'home__hero-section darkBg'}>
                <div className='container'>
                    <div className="row home__hero-row" 
                    style={{display:'flex', flexDirection:imgStart==='start'?' row-reverse':'row'}}
                    >
                    <div className='col'>
                        <div className='home__hero-text-wrapper'>
                            <div className='topline'>{topLine}</div>
                            <h1 className={lightText? 'heading': 'heading dark'}>{headline}</h1>
 <p className={lightTextDesc? 'home__hero-subtitle': 'home__hero-subtitle dark'}> 
 {description}
 <Link to='/sign-up'>
     <Button buttonSize='btn--wide' buttonColor='blue'>
{buttonLabel}
     </Button>
 </Link>
 </p>
                        </div>

                    </div>

                    <div className='col'>
                        <div className='home__hero-img-wrapper'>
                      <img src={img} alt={alt} className='home_hero-img'/>
                        </div>
                    </div>
                    </div>

                </div>

            </div>

        </>
    );
}

export default HeroSection

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

2021-05-10 09:05:15

使用时刻格式，因为那是日期…转换为日期格式… 时刻(array_list_item.close_date) .format(“;”)}

注意:React不会在map函数中显示这种类型的日期格式

“created_at”:“2018 - 09 - 18 t16:39:22.184z”,

2021-03-09 14:16:23

对象作为React子对象无效。如果要呈现子元素的集合，请使用数组

推荐文章

最新文章

标签