React Native 中的另一个"Objects are not valid as a React child "

Question

我是React Native的新手，但我以前一直在使用React。我之前在react中有一段类似的代码，但现在在react-native中，我一直收到这个错误消息。

代码尽可能地简化了。

为什么我得到这个错误?没有async，我引用对象。等等……在这个例子中

我在app.js中的代码:

import React, { Component } from 'react';
import { View, StyleSheet, SafeAreaView,ScrollView} from 'react-native';
import { Text} from 'react-native-paper';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true,
isSwitchOn: false,
isMaintenanceSwitchOn: false,
messagesReturned: [{
key: '1',
title: 'example title 1',
subtitle: 'example subtitle 1',
},
{
key: '2',
title: 'example title 2',
subtitle: 'example subtitle 2',
},
{
key: '3',
title: 'example title 3',
subtitle: 'example subtitle 3',
},],
};
}

render() {

return (
<View style={styles.container}>
<View style={{flexDirection:'row', alignItems:'flex-start', width: 350, height: 40, textAlign: 'left'}}>
<Text style={styles.text}> Messages:    </Text>  
</View >
<SafeAreaView style={styles.safeareacontainer}>
<ScrollView style={styles.scrollView}>
<MessageList msgConst = {this.state.messagesReturned}/> 
</ScrollView>
</SafeAreaView>
</View>
);

}
}
class  MessageList extends Component {
render() {
const listmessages = this.props.msgConst.map((msg) => 
<Text>{msg.title}</Text>
);
return(
{listmessages}
);
}
}

Answer 1

您的MessageList组件正在尝试呈现一个对象- {listMessages}。如果你去掉花括号，它应该可以工作:

class  MessageList extends Component {
render() {
const listmessages = this.props.msgConst.map((msg) => 
<Text>{msg.title}</Text>
);
// Change this line
return listmessages;
}
}