javascript - 在将数组作为数据传递给渲染时，对象作为 React 子对象无效

Question

我正在使用名为 react-native-autocomplete-input 的依赖项。在这里，我试图使用一个数组数据集合。但是每次我尝试使用数组 Objects are not valid as a React child 时它都会抛出错误。如果您打算呈现子项集合，请改用数组。这是我的代码的样子:

return (
  <Autocomplete
      data={queryResult}
      placeholder={"Type name ..."}
      autoFocus={true}
      placeholderTextColor={'#fff'}
      keyExtractor={(item, i) => item.id.toString()}
      onChangeText={(text) => searchData(text)}
      renderItem={({ item, i }) => (
          <TouchableWithoutFeedback
              onPress={() => {
                  props.navigation.navigate("MovieDetail", {
                      item: item,
                  });
              }}
          >
              <View
                  style={{
                      flex: 1,
                      flexDirection: "row",
                      marginBottom: 10,
                      borderColor: 'red',
                      borderWidth: 1
                  }}
              >
                  <Image
                      style={{ width: 38, height: 57 }}
                      source={{ uri: 'https://picsum.photos/200' }}
                  />
                  <View
                      style={{
                          flexWrap: "wrap",
                          flexDirection: "column",
                          marginLeft: 5,
                          justifyContent: "center",
                      }}
                  >
                      <Text>New movie</Text>
                      <Text>2021</Text>
                  </View>
              </View>
          </TouchableWithoutFeedback>
      )}
  />
)

这是我的渲染函数。我将 queryResult 作为抛出错误的数据传递。这是我的 queryResult 数组的样子:

var queryResult = [
  {
    backdrop_path: "http://image.tmdb.org/t/p/w500//axMEROxH94BveBZBfPctWX4qLe4.jpg",
    genre_ids: [16, 878, 10751, 35],
    genres: undefined,
    id: 482321,
    image: "http://image.tmdb.org/t/p/w342//gA9QxSravC2EVEkEKgyEmDrfL0e.jpg",
    popularity: 1119.149,
    stat: "2021-10-15",
    title: "Ron's Gone Wrong",
    vote_average: 8.3,
    vote_count: 484
  },
  {
    backdrop_path: "http://image.tmdb.org/t/p/w500//axMEROxH94BveBZBfPctWX4qLe4.jpg",
    genre_ids: [16, 878, 10751, 35],
    genres: undefined,
    id: 482321,
    image: "http://image.tmdb.org/t/p/w342//gA9QxSravC2EVEkEKgyEmDrfL0e.jpg",
    popularity: 1119.149,
    stat: "2021-10-15",
    title: "Ron's Gone Wrong",
    vote_average: 8.3,
    vote_count: 484
  }
]

这背后的原因是什么。我究竟应该如何传递这个数组？

Answer 1

在 react-native-autocomplete-input 中，它需要一个字符串数组，而您正在填充一个对象数组。

1. 如果您想使用默认的平面列表渲染项，则必须将数据作为字符串数组传递。例如data = ["输入1", "输入数据2]

2. 如果你想使用一个对象，那么使用'flatListProps'

例如

<Autocomplete
  data={queryResult}
  flatListProps={{
    keyExtractor: (_, idx) => idx,
    renderItem: ({ item }) => <Text>{item.title}</Text>,
  }} />