不变违规:对象作为React子元素无效

2020/09/30 19:01 · javascript ·  · 0评论

在组件的render函数中,我有:

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

一切都很好,但是当单击<li>元素,出现以下错误:

未捕获的错误:始终违规:对象作为React子对象无效(找到:带有键{dispatchConfig,dispatchMarker,nativeEvent,target,currentTarget,type,eventPhase,气泡,cancellable,timestamp,defaultPrevented,isTrusted,视图,详细信息, ,screenY,clientX,clientY,ctrlKey,shiftKey,altKey,metaKey,getModifierState,按钮,按钮,relatedTarget,pageX,pageY,isDefaultPrevented,isPropagationStopped,_dispatchListeners,_dispatchIDs})。如果您打算渲染孩子的集合,请使用数组代替,或者使用React附加组件中的createFragment(object)包装对象。检查的渲染方法Welcome

如果我改变this.onItemClick.bind(this, item)(e) => onItemClick(e, item)地图功能一切正常的内部预期。

如果有人可以解释我在做什么错并解释我为什么会收到此错误,那将是很好的

更新1:

onItemClick函数如下,删除this.setState导致错误消失。

onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

但是我无法删除此行,因为我需要更新此组件的状态

我遇到了这个错误,结果是我无意中在我的JSX代码中包含了一个我期望是字符串值的对象:

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElement过去是一个字符串,但是由于重构而成为对象。不幸的是,React的错误消息不能很好地指出问题所在。我必须一直跟踪堆栈跟踪,直到我意识到“ props”已传递到组件中,然后才发现有问题的代码。

您将需要引用对象的属性(它是字符串值),或者将Object转换为所需的字符串表示形式。一种选择是,JSON.stringify如果您实际上想查看对象的内容。

因此,当我尝试显示createdAt日期对象属性时出现了此错误如果这样连接.toString()最后,它将进行转换并消除错误。只是将其作为可能的答案发布,以防其他人遇到相同的问题:

{this.props.task.createdAt.toString()}

我只是遇到了相同的错误,但由于错误有所不同:我使用了像这样的双括号:

{{count}}

插入值count而不是正确的值

{count}

编译器大概变成了它{{count: count}},即试图插入一个对象作为React子对象。

只是以为我会加上这个问题,因为今天我遇到了同样的问题,原来是因为我返回的只是函数,当我将其包装在一个<div>标记中后,它开始工作,如下

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

以上导致错误。我通过将return()部分更改为解决了该问题

return (
  <div>
    {gallerySection}
  </div>
);

...或简单地:

return gallerySection

React child(singular)应该是原始数据类型的类型而不是object,或者可以是JSX tag(在我们的例子中不是)在开发中使用Proptypes包以确保进行验证。

只是一个快速的代码片段(JSX)比较,可以代表您一些想法:

  1. 错误:对象被传递给子对象

    <div>
    {/* item is object with user's name and its other details on it */}
     {items.map((item, index) => {
      return <div key={index}>
    --item object invalid as react child--->>>{item}</div>;
     })}
    </div>
    
  2. 没有错误:将对象的属性(应该是原始的,即字符串值或整数值)传递给子级。

    <div>
     {/* item is object with user's name and its other details on it */}
      {items.map((item, index) => {
       return <div key={index}>
    --note the name property is primitive--->{item.name}</div>;
      })}
    </div>
    

TLDR;(来自下面的源代码):确保在使用React时,您在JSX中渲染的所有项目都是基本类型,而不是对象。通常会发生此错误,因为与分派事件有关的函数被赋予了意外的对象类型(即,当您应该传递字符串时传递对象),或者组件中的JSX的一部分未引用原语(即this.props与this.props.name)。

资料来源-codingbismuth.com

我不得不在不必要的情况下将大括号括在render()函数的return语句内包含HTML元素的变量周围。这使得React将其视为对象而不是元素。

render() {
  let element = (
    <div className="some-class">
      <span>Some text</span>
    </div>
  );

  return (
    {element}
  )
}

一旦从元素中删除了花括号,错误就消失了,并且元素正确呈现。

我不得不忘记发送到演示组件的道具周围的花括号:

之前:

const TypeAheadInput = (name, options, onChange, value, error) => {

const TypeAheadInput = ({name, options, onChange, value, error}) => {

我也收到了“对象作为React子对象无效”错误,对我来说,原因是由于在JSX中调用异步函数引起的。见下文。

class App extends React.Component {
    showHello = async () => {
        const response = await someAPI.get("/api/endpoint");

        // Even with response ignored in JSX below, this JSX is not immediately returned, 
        // causing "Objects are not valid as a React child" error.
        return (<div>Hello!</div>);
    }

    render() {
        return (
            <div>
                {this.showHello()}
            </div>
        );
    }
}

我了解到,React不支持异步渲染。React团队正在研究此处记录的解决方案

对于将Firebase与Android结合使用的任何人,这只会破坏Android。我的iOS仿真忽略了它。

正如上面的Apoorv Bankey发布的那样。

对于Android而言,任何高于Firebase V5.0.3的东西都无法承受。固定:

npm i --save firebase@5.0.3

在这里多次确认
https://github.com/firebase/firebase-js-sdk/issues/871

我也有同样的问题,但是我的错误太愚蠢了。我试图直接访问对象。

class App extends Component {
    state = {
        name:'xyz',
        age:10
    }
    render() {
        return (
            <div className="App">
                // this is what I am using which gives the error
                <p>I am inside the {state}.</p> 

                //Correct Way is

                <p>I am inside the {this.state.name}.</p> 
            </div>
        );
    }                                                                             

}

如果出于某种原因您导入了firebase。然后尝试运行npm i --save firebase@5.0.3这是因为firebase break反应为原生,因此运行此程序将对其进行修复。

我有同样的问题,因为我没有把props花括号放进去

export default function Hero(children, hero ) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

因此,如果您的代码与以上代码相似,则会收到此错误。要解决此问题,只需将花括号放在props

export default function Hero({ children, hero }) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

在我的情况下,我忘了返回render函数的html元素,而我却返回了一个对象。我所做的只是将{items}与html元素包装在一起-如下所示的简单div

<ul>{items}</ul>

我遇到了同样的错误,我改变了这个

export default withAlert(Alerts)

对此

export default withAlert()(Alerts)

在较旧的版本中,以前的代码可以,但是在较新的版本中,它将引发错误。因此,请使用后面的代码来避免出现错误。

通常这会弹出,因为您没有正确地进行破坏。以下面的代码为例:

const Button = text => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

我们用= text =>参数声明它但实际上,React期望这将是一个无所不包的props对象。

因此,我们确实应该做这样的事情:

const Button = props => <button>{props.text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

注意区别吗?props这里param可以命名为(props只是与命名法相匹配的约定),React只是期望一个带有键和值的对象。

通过对象分解,您可以做并经常看到这样的事情:

const Button = ({ text }) => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

...有效

碰到这个问题的任何人都有可能在不破坏结构的情况下意外地声明了其组件的道具参数。

在我的情况下,发生错误是因为我用大括号返回了元素数组,而不仅仅是返回数组本身。

错误代码

   render() {
        var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
        );
        return {rows};
    }

正确的代码

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
    );
    return rows;
}

您只是在使用对象的键,而不是整个对象!

可以在这里找到更多详细信息:https : //github.com/gildata/RAIO/issues/48

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SCT extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: this.props.data,
            new_data: {}
        };
    }
    componentDidMount() {
        let new_data = this.state.data;
        console.log(`new_data`, new_data);
        this.setState(
            {
                new_data: Object.assign({}, new_data)
            }
        )
    }
    render() {
        return (
            <div>
                this.state.data = {JSON.stringify(this.state.data)}
                <hr/>
                <div style={{color: 'red'}}>
                    {this.state.new_data.name}<br />
                    {this.state.new_data.description}<br />
                    {this.state.new_data.dependtables}<br />
                </div>
            </div>
        );
    }
}

SCT.propTypes = {
    test: PropTypes.string,
    data: PropTypes.object.isRequired
};

export {SCT};
export default SCT;
<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>

在我的情况下,我遇到了同样的问题,我更新了redux状态,而新的数据参数与旧参数不匹配,所以当我想通过此错误访问某些参数时,

也许这种经验可以帮助某人

如果您正在使用Firebase并看到此错误,则值得检查是否正确导入了它。从5.0.4版开始,您必须像这样导入它:

import firebase from '@firebase/app'
import '@firebase/auth';
import '@firebase/database';
import '@firebase/storage';

是的我知道。我也为此损失了45分钟。

我只是让自己经历了这个错误的一个非常愚蠢的版本,在此我不妨分享一下,以供后代参考。

我有一些像这样的JSX:

...
{
  ...
  <Foo />
  ...
}
...

我需要对此进行注释以调试某些内容。我在IDE中使用了键盘快捷键,结果是:

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

当然,这是无效的-对象不是有效的反应子对象!

我想向此列表添加另一个解决方案。

眼镜:

  • “ react”:“ ^ 16.2.0”,
  • “ react-dom”:“ ^ 16.2.0”,
  • “ react-redux”:“ ^ 5.0.6”,
  • “ react-scripts”:“ ^ 1.0.17”,
  • “ redux”:“ ^ 3.7.2”

我遇到了同样的错误:

未捕获的错误:对象作为React子对象无效(找到:键为{XXXXX}的对象)。如果要渲染子级集合,请改用数组。

这是我的代码:

let payload = {
      guess: this.userInput.value
};

this.props.dispatch(checkAnswer(payload));

解:

  // let payload = {
  //   guess: this.userInput.value
  // };

this.props.dispatch(checkAnswer(this.userInput.value));

发生此问题是因为有效负载将项目作为对象发送。当我删除有效负载变量并将userInput值放入分派中时,一切按预期开始工作。

如果万一您使用Firebase,则项目中的任何文件。然后只需将导入的firebase语句放在最后即可!!

我知道这听起来很疯狂,但请尝试!

当我遇到以下错误时,我的问题很简单:

objects are not valid as a react child (found object with keys {...}

只是我在传递带有错误中指定的键的对象时,尝试使用{object}直接在组件中呈现该对象,并期望它是一个字符串

object: {
    key1: "key1",
    key2: "key2"
}

在React Component上渲染时,我使用了以下内容

render() {
    return this.props.object;
}

但这应该是

render() {
    return this.props.object.key1;
}

如果使用无状态组件,请遵循以下格式:

const Header = ({pageTitle}) => (
  <h1>{pageTitle}</h1>
);
export {Header};

这似乎对我有用

像这样的事情刚发生在我身上...

我写:

{response.isDisplayOptions &&
{element}
}

将其放置在div中修复:

{response.isDisplayOptions &&
    <div>
        {element}
    </div>
}

找到:带键的对象

这意味着您传递的东西是关键值。因此,您需要修改处理程序:

onItemClick(e, item) {
   this.setState({
     lang: item,
   });
}

onItemClick({e, item}) {
  this.setState({
    lang: item,
  });
}

您错过了花括号({})。

就我而言,我向子功能组件添加了异步,并遇到了此错误。不要对子组件使用异步。

在使用Firebase的情况下,如果不能通过在import语句末尾放置Firebase来工作,则可以尝试将其放入生命周期方法之一,也就是可以将其放入内部componentWillMount()

componentWillMount() {
    const firebase = require('firebase');
    firebase.initializeApp({
        //Credentials
    });
}

Invariant Violation: Objects are not valid as a React child使用需要renderItem道具的组件时发生了我的事,例如:

renderItem={this.renderItem}

我的错误是使我的renderItem方法async

我的错误是因为这样编写:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff} </p>)
})


代替:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff.name} </p>)
})

这意味着我试图渲染对象而不是其中的值。

编辑:这是为了反应不是本地的。

本文地址:http://javascript.askforanswer.com/bubianweiguiduixiangzuoweireactziyuansuwuxiao.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!