我正在设置一个带有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。
对象作为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()，也不能尝试显示对象的任何属性。
我正处于开发生涯的早期阶段，如果有拼写错误，请原谅我。
