React不变量冲突:对象作为React的子对象是无效的

React Invariant Violation: Objects are not valid as a React child

本文关键字：React 对象 无效 不变量 冲突      更新时间：2023-09-26

我有以下代码:

import ReactDom from 'react-dom';
import React from 'react';
import {render} from 'react-dom';
import $ from 'jquery';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: '',
            loading: true
        }
    }
    componentDidMount () {
        const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
        $.get(newsfeedURL, function(result) {
            this.setState({
                data: JSON.parse(result),
                loading: false
            });
            console.log(typeof this.state.data.messages);
        }.bind(this));
    }
    render () {
      let content;
      if (this.state.loading === false && this.state.data.messages) {
        content = Object.keys(this.state.data.messages).map(key => {
         return <div key={key}>Key: {key}, Value: {this.state.data.messages[key]}</div>;
        })
      } else { 
        content = ''; // whatever you want it to be while waiting for data
      }
      return (
        <div>
          {content}
        </div>
      )
    }
}

ReactDom.render(
  <App />,
  document.getElementById('app')
);

，但我得到以下错误:

未捕获的不变量违规:对象作为React子对象无效(发现:对象具有关键字{body, attachments, videos, topics, updated_at, id, subject, downvotes, author, posted_at, comments, user_vote, upvotes, status, tags, locations, track_impact, user_is_following, comments_count})。如果你想渲染一组孩子，使用一个数组代替或包装对象使用createFragment(object)从React附加组件。检查App的渲染方法

我看了一下这个答案，但它对我的情况没有帮助:不变量违反:对象作为React子对象无效

在您的div中，您正在尝试渲染Value: {this.state.data.messages[key]}，这是一个对象。你不能直接使用React的JSX渲染对象。然而，你可以渲染的是这个对象中保存的一些实际的原始数据类型(例如字符串，数字)，例如Value: {this.state.data.messages[key].body}将渲染对象的body属性中保存的字符串值。下面是一个演示:http://codepen.io/PiotrBerebecki/pen/bwowxP

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: '',
            loading: true
        }
    }
    componentDidMount () {
        const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
        $.get(newsfeedURL, function(result) {
            this.setState({
                data: JSON.parse(result),
                loading: false
            });
            console.log(typeof this.state.data.messages);
        }.bind(this));
    }
    render () {
      let content;
      if (this.state.loading === false && this.state.data.messages) {
        content = Object.keys(this.state.data.messages).map(key => {
         console.log(this.state.data.messages[key])
         return <div key={key}><b>Key: {key},</b> Value: {this.state.data.messages[key].body}</div>;
        })
      } else { 
        content = ''; // whatever you want it to be while waiting for data
      }
      return (
        <div>
          {content}
        </div>
      )
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: '',
            loading: true
        }
    }
    componentDidMount () {
        
        const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
                $.get(newsfeedURL, function(result) {
                    this.setState({
                        data: result,
                        loading: false
                    });
                }.bind(this));
    }
    render () {
      let content;
      if (this.state.loading === false && this.state.data.messages) {
        content = this.state.data.messages.map((ele,key) => {
         return <div key={key}>id: {this.state.data.messages[key].id}</div>;
        })
      } else { 
        content = ''; // whatever you want it to be while waiting for data
      }
      return (
        <div>
          {content}
        </div>
      )
    }
}
ReactDOM.render(
  <App />,
  document.getElementById('app')
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

相关文章：