我正在设置一个带有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;
我做错了什么?
有同样的问题，在我的情况下
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>);
因为我使用数组，我使用平面列表来显示，并确保我与对象一起工作。值，而不是对象，否则你会遇到同样的问题
我希望它能帮助到其他人。
这个错误似乎也发生在你无意中发送一个复杂的对象，其中包括例如Date to React子组件。
它传递给子组件new Date('....')的示例如下:
const data = {name: 'ABC', startDate: new Date('2011-11-11')}
...
<GenInfo params={data}/>
如果你将它作为子组件参数的值发送，你将发送一个复杂的对象，你可能会得到如上所述的相同错误。
检查是否传递了类似的东西(在底层生成复杂的Object)。相反，您可以将该日期作为字符串值发送，并在子组件中执行新日期(string_date)。
我也遇到过类似的问题，但我的这个方法奏效了。
我的输出
但我犯的错误很简单。在我的内容是超过两个，我已经忘记包装作为一个数组。我没有给卡莉戴牙套。
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>
