我有这个组件功能
async FetchCards() {
axios.get(settings.default.baseUrl + '/api/cards/get_cards').then((data) => {
var dd = data.data.data;
//this.setState({cards : d});
return(
dd.map(d => {
<Card style={{flex: 0}}>
<CardItem>
<Left>
<Thumbnail source={{uri: d.img}} />
<Body>
<Text>{d.name}</Text>
<Text note>{d.position}</Text>
</Body>
</Left>
<Right>
{d.gender == 'male' && <Icon style={{fontWeight : '900' , fontSize:32 , color : 'darkblue'}} name='ios-male'></Icon>}
{d.gender == 'female' && <Icon style={{fontWeight : '900' , fontSize:32 , color : 'pink'}} name='ios-female'></Icon>}
</Right>
</CardItem>
<CardItem>
<Body>
<Text>
{d.subtitle}
</Text>
</Body>
</CardItem>
</Card>
})
);
}).catch((err) => {
console.log(err);
});
}
当我在这里调用它的时候
{this.FetchCards()}
它引发了这个错误:
Invariant Violation : Objects are not valid as a react child (found object with keys{_40,_65,_55,_72}) , if you meant to render a collection of children , use an array instead.
最佳答案
看起来您是在渲染方法中直接在 JSX 中调用 this.FetchCards。您可以在 componentDidMount 中获取数据并将其设置为您的组件状态。
示例
class App extends React.Component {
state = { cards: [] };
componentDidMount() {
axios.get(settings.default.baseUrl + "/api/cards/get_cards").then(data => {
const cards = data.data.data;
this.setState({ cards });
});
}
render() {
const { cards } = this.state;
return (
<View>
{cards.map(c => (
<Card style={{ flex: 0 }}>
<CardItem>
<Left>
<Thumbnail source={{ uri: c.img }} />
<Body>
<Text>{c.name}</Text>
<Text note>{c.position}</Text>
</Body>
</Left>
<Right>
{c.gender == "male" && (
<Icon
style={{
fontWeight: "900",
fontSize: 32,
color: "darkblue"
}}
name="ios-male"
/>
)}
{c.gender == "female" && (
<Icon
style={{ fontWeight: "900", fontSize: 32, color: "pink" }}
name="ios-female"
/>
)}
</Right>
</CardItem>
<CardItem>
<Body>
<Text>{c.subtitle}</Text>
</Body>
</CardItem>
</Card>
))}
</View>
);
}
}
关于javascript - React 内部的不变违规错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51104833/