javascript - 如何使用 setState 将对象添加到数组列表

Question

我正在尝试使用以下方法将此对象 { "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>
    );
}

Answer 1

问题出在 renderItem 方法的这些行中:

<Text style={styles.message}>{item}</Text>

此上下文中的

item 是一个对象，无法由 Text 组件呈现，因此会出现错误。

考虑到你的代码，我相信它应该是 item.message 像这样:

<Text style={styles.message}>{item.message}</Text>