React Native中出现'Objects are not valid as a React child'错误如何解决？

嘿，这个问题我太熟了！你遇到的核心问题是：React的<Text>组件根本没法直接渲染JavaScript对象——你现在把整个包含id、customer等属性的item对象传给了SuggestionItem，然后在它的render方法里直接把这个对象塞进<Text>标签里，这就触发了那个报错。

问题根源 #

看你SuggestionItem里的这段代码：

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

这里的value是个完整的对象，而<Text>只能渲染字符串、数字这类基本类型，可没法直接解析整个对象~

两种快速修复方案 #

你选哪种都行，看你的需求：

方案1：在FlatList里直接传递要显示的字段

如果你只需要显示对象里的某一个属性（比如customer），可以在传递value的时候直接把这个字段传过去：

renderSearches = () => { 
  if (this.state.products.length) { 
    return ( 
      <View style={styles.suggestionContainer}>
        <FlatList 
          data={this.state.products} 
          keyExtractor={(item, index) => index.toString()} 
          // 把item.customer换成你实际要显示的字段名，比如item.productName之类的
          renderItem={({item}) => <SuggestionItem value={item.customer} onSelect={this.updateSearchTerm} />} 
        />
      </View> 
    ) 
  } 
  return (<View></View>); 
}

方案2：在SuggestionItem里提取对象的具体字段

如果你需要把整个对象传给onSelect方法，但只显示其中一个字段，那就在SuggestionItem里处理：

render() {
  const {value} = this.props;
  // 同样，把value.customer替换成你要展示的实际字段
  return (
    <TouchableOpacity style={styles.suggestion} onPress={() => {this.props.onSelect(value)}}>
      <Text style={styles.suggestionText}>{value.customer}</Text>
    </TouchableOpacity>
  );
}

小提示 #

要是不确定对象里有哪些字段，可以在renderItem里加个console.log(item)，打印出来看看具体结构，这样就不会选错字段啦！

内容的提问来源于stack exchange，提问作者FairyQueen