时间戳

首页 > 解决方案 > 如何使用 setState 将对象添加到数组列表

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

问题描述

我正在尝试使用 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>
    );
}

标签： javascriptreact-native

解决方案

问题在于您的renderItem方法的这些行：

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

item在这种情况下是一个对象，不能由Text组件呈现，因此出现错误。

考虑到您的代码，我相信它应该是item.message这样的：

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

推荐阅读