我正在尝试使用以下方法将此对象 { "origin": "user", "message": this.state.message }
添加到 messages
数组列表中设置状态。现在我收到以下错误:
Invariant Violation: Objects are not valid as React child (found:object with keys {origin, message})
此外,如果有比 setTimeout
更好的方法来等待消息呈现后再滚动到底部,那就太酷了!
sendMessage = () => {
this.setState(prevState => ({
messages: [...prevState.messages, { "origin": "user", "message": this.state.message }]
}));
this.callChatService().then((responseJson) => {
this.setState({
context: responseJson.context
});
for (var i = 0; i < responseJson.output.generic.length; i++) {
this.setState(prevState => ({
messages: [...prevState.messages, { "origin": "bot", "message": responseJson.output.generic[i].text}]
}));
}
})
setTimeout(() => this.refs.flatList.scrollToEnd(), 1500);
this.setState({
message: ""
})
}
renderItem = ({ item }) => {
if (item.origin == "user") {
return (
<View>
<View style={styles.rowRight}>
<Text style={styles.message}>{item}</Text>
</View>
</View>
);
}
else {
return (
<View>
<View style={styles.rowLeft}>
<Text style={styles.message}>{item}</Text>
</View>
</View>
);
}
}
componentWillMount() {
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.title}>{this.state.header}</Text>
</View>
<FlatList
style={styles.list}
ref="flatList"
data={this.state.messages}
keyExtractor={(item, index) => index}
renderItem={this.renderItem}
/>
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={20}>
<View style={styles.footer}>
<TextInput
value={this.state.message}
onChangeText={text => this.setState({ message: text })}
style={styles.input}
underlineColorAndroid="transparent"
placeholder="Ask me anything"
/>
<TouchableOpacity onPress={this.sendMessage} style={styles.sendButton} >
<Icon name="send" type="material-icon" size={28} color="#00B2EE" />
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</View>
);
}
最佳答案
问题出在 renderItem
方法的这些行中:
<Text style={styles.message}>{item}</Text>
此上下文中的 item
是一个对象,无法由 Text
组件呈现,因此会出现错误。
考虑到你的代码,我相信它应该是 item.message
像这样:
<Text style={styles.message}>{item.message}</Text>
关于javascript - 如何使用 setState 将对象添加到数组列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51725840/