Javascript 如何使用setState将对象添加到arraylist

我试图使用setState将这个对象

{“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>
    );
}

sendMessage=（）=>{
this.setState（prevState=>({
消息：[…prevState.messages，{“源”：“用户”，“消息”：this.state.message}]
}));
this.callChatService（）.then（（responseJson）=>{
这是我的国家({
上下文：responseJson.context
});
对于（var i=0；i({
messages:[…prevState.messages，{“源”：“bot”，“message”：responseJson.output.generic[i].text}]
}));
}
})
setTimeout（（）=>this.refs.flatList.scrollToEnd（），1500）；
这是我的国家({
信息：“
})
}
renderItem=（{item}）=>{
如果（item.origin==“用户”）{
返回(
{item}
);
}
否则{
返回(
{item}
);
}
}
组件willmount（）{
}
render（）{
返回(
{this.state.header}
索引}
renderItem={this.renderItem}
/>
this.setState（{message:text}）}
style={style.input}
underlineColorAndroid=“透明”
占位符=“问我任何问题”
/>
);
}

问题在于您的

renderItem

方法中的那些行：

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

---

渲染方法看起来像什么？添加了渲染方法

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