我正在设置一个带有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;
我做错了什么?
我今天得到了同样的错误，但与这个问题中发布的场景相比，情况有所不同。希望下面的解决方案能帮助到一些人。
下面的渲染函数足以理解我的场景和解决方案:
render() {
let orderDetails = null;
if(this.props.loading){
orderDetails = <Spinner />;
}
if(this.props.orders.length == 0){
orderDetails = null;
}
orderDetails = (
<div>
{
this.props.orders &&
this.props.orders.length > 0 &&
this.props.orders.map(order => (
<Order
key={order.id}
ingredient={order.ingredients}
price={order.price} />
))
}
</div>
);
return orderDetails;
}
在上面的代码片段中:如果return orderDetails作为return {orderDetails}发送，那么尽管'orderDetails'的值(值为<Spinner/>或null或与<Order />组件相关的JSX)，这个问题中发布的错误仍然会弹出。
错误描述:React -dom.development.js:57未捕获的不变性违规:对象作为React子对象无效(发现:带有键{orderDetails}的对象)。如果要呈现子元素的集合，请使用数组。
我们不能从render()方法内部的返回调用中返回JavaScript对象。原因是React期望一些JSX, false, null, undefined, true在UI中呈现，而不是一些JavaScript对象，当我使用返回{orderDetails}时，我试图呈现，因此得到如上所述的错误。
有效:
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
无效:
<div>{orderDetails}</div> // This is WRONG, orderDetails is an object and NOT a valid return value that React expects.
Edit: I also got this error on my company's test server used by QA's for their testing. I pointed my local code to that test server and tested the scenario in which this error was reported by QA team and found NO ERROR in my local machine. I got surprised. I re-checked multiple number of times, re-checked the scenario with QA team and I was doing right but still I was not able to replicate the issue. I consulted my fellow devs but still were not able to figure out the root cause. So keeping with the information in the error message I started scanning all the code I had deployed in my last deployment commit ( to be more specific last 4-5 commits because I suspected it could be there from last few deployments but was caught in the current deployment), especially all the components I had developed and found that there was a component - inside which there was no specified condition being met so it was returning NOTHING from it. So see below sample pseudo code. I hope it helps.
render () {
return (
{this.props.condition1 && (
return some jsx 1
)}
{this.props.condition1 && (
return some jsx 2
)})
}
如果你在上面的伪代码中看到，如果条件1和条件2不满足，那么这个组件将从它呈现NOTHING，理想情况下，react组件必须从它返回一些JSX, false, null, undefined, true。
我希望它能帮助到其他人。
这个错误似乎也发生在你无意中发送一个复杂的对象，其中包括例如Date to React子组件。
它传递给子组件new Date('....')的示例如下:
const data = {name: 'ABC', startDate: new Date('2011-11-11')}
...
<GenInfo params={data}/>
如果你将它作为子组件参数的值发送，你将发送一个复杂的对象，你可能会得到如上所述的相同错误。
检查是否传递了类似的东西(在底层生成复杂的Object)。相反，您可以将该日期作为字符串值发送，并在子组件中执行新日期(string_date)。
有同样的问题，在我的情况下
1. 将字符串解析为Json
2. 确保在渲染视图时不试图显示整个对象，而是显示object.value
data = [
{
"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"
}];
var jsonData = JSON.parse(data)
然后是我的观点
return (
<View style={styles.container}>
<FlatList
data={jsonData}
renderItem={({ item }) => <Item title={item.name} />}
keyExtractor={item => item.id}
/>
</View>);
因为我使用数组，我使用平面列表来显示，并确保我与对象一起工作。值，而不是对象，否则你会遇到同样的问题
我有一个类似的错误，而我正在创建一个自定义模式。
const CustomModal = (visible, modalText, modalHeader) => {}
问题是我忘记了功能组件只能有一个道具传递给他们，根据REACT文档:
这个函数是一个有效的React组件，因为它只接受一个
“props”(代表属性)对象参数与数据和
返回一个React元素。我们称这种组件为“功能组件”
因为它们是JavaScript函数。反应文档
Therefore when we want to pass several variables we need to wrap them into an object or an Array and pass the pointer to that array or object. And destructure it on the component side before invoking the component. Alternatively we can use curly braces to indicate that we are sending an object with identical property names and variables that contain the value of those properties, like in the example here. And then define the function also to destructure upon arrival of the properties contained in the object.
const CustomModal = ({visible, modalText, modalHeader}) => {}
如果你有多个值要传递给组件，你应该传递一个对象，在它的属性/变量周围用花括号括起来(假设它们有相同的名字)。
对象作为React子对象无效
我也得到了相同的错误，但情况不同。我正在学习react useReducer钩子，并实现了一个带有增量，减量和重置按钮的计数器，我试图在屏幕上显示计数，但我是上述错误。
在代码中，我声明了由useReducer钩子返回的count作为对象，我直接尝试返回它，而不是它的count属性
我应该返回count。我只返回count(对象本身)而不是property。
我们也可以stringify object并返回字符串。
import React, { useReducer } from "react";
const initialState = {
count:0,
}
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return {count:state.count + 1}
case 'decrement':
return {count:state.count - 1}
case 'reset':
return initialState
default:
return state
}
}
function CounterWithReducer(props) {
const [count, dispatch] = useReducer(reducer, initialState);
return (
<>
<h1>{count}</h1>
<button onClick={()=>{dispatch({type:'increment'})}}>Increment</button>
<button onClick={()=>{dispatch({type:"decrement"})}}>Decrement</button>
<button onClick={()=>{dispatch({type:"reset"})}}>Reset</button>
</>
);
}
export default CounterWithReducer;
在上面的代码中
{数}
这个部分(在返回部分)是我犯错误的地方，我需要使用count.count而不是count
总结是，如果你试图在屏幕上显示对象，你既不能使用JSON.stringify()，也不能尝试显示对象的任何属性。
我正处于开发生涯的早期阶段，如果有拼写错误，请原谅我。
我也遇到过类似的问题，但我的这个方法奏效了。
我的输出
但我犯的错误很简单。在我的内容是超过两个，我已经忘记包装作为一个数组。我没有给卡莉戴牙套。
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>
这个问题是因为您试图显示整个对象，而不是对象内部的键。
例如:数据是
[
{
"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>
)
}
</>
)
}
}
