Question

我将一个数组传递给FlatList，但我得到了一个错误：

'不变违规：对象作为React子项无效（找到：具有键{id，customer，etc}的对象。

我尝试在项目周围放置括号并删除它们但没有任何工作。有谁知道如何解决这个错误？

renderSearches = () => {
    if (this.state.products.length) {
        return (
            <View style={styles.suggestionContainer}>
                <FlatList
                    data={this.state.products}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({item}) => <SuggestionItem value={item} onSelect={this.updateSearchTerm} />}
                />
            </View>
        )
    }

    return (<View></View>);
}

这是SuggestionItem渲染：

render() {
    const {value} = this.props;
    return (
        <TouchableOpacity style={styles.suggestion} onPress={() => {this.props.onSelect(value)}}>
            <Text style={styles.suggestionText}>{value}</Text>
        </TouchableOpacity>
    );
}

Answer 1

你的SuggestionItems渲染方法应该有 -

<Text style={styles.suggestionText}>{value.customer}</Text>

或类似

<Text style={styles.suggestionText}>{value.name}</Text>

而不是直接在文本组件中呈现整个对象

<Text style={styles.suggestionText}>{value}</Text>

Answer 2

value是您传递给Text元素的对象。它应该是字符串而不是对象。例如：

<Text style={styles.suggestionText}>{value.cutomer}</Text>

Answer 3

就像红色框告诉你的那样:)你正在使用键渲染一个对象，在你的情况下，值是一个看起来像这样的对象=＆gt;

value: {
    id: "1234"
    customer: "0"
    ........
}

换句话说，传递给FlatList的数组是带对象的数组...所以你必须选择要在Text组件中显示的对象属性

render() {
  const {id, customer, perm_override, order_count, cost_flag .....} = this.props.value;
  return (
    <TouchableOpacity style={styles.suggestion} onPress={() => {this.props.onSelect(value)}}>
        <Text style={styles.suggestionText}>{customer}</Text>
    </TouchableOpacity>
  );
}

Answer 4

在我的情况下，我在数据集中有一个对象数组，直到删除了我的对象中的{room.data.name.toString（）}之类的“ toString（）”后，我才知道数据收集，然后删除“ toString（）”，问题解决了

为什么我在React Native中得到“对象在React中无效”？

4 个答案: