React-native 自动完成问题（“对象作为 Reach 子项无效”）

Question

我正在尝试在 React-native 中使用自动完成功能，但显然我做错了。

这是一个显示我正在做的代码的最小示例：

import React, {useState, useEffect} from 'react';

import {
  SafeAreaView,
  StyleSheet,
  TextInput,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import Autocomplete from 'react-native-autocomplete-input';

const DATA =
[{"id": 1,"title": "test1"},{"id": 2,"title": "test2"},{"id": 3,"title": "test3"}]

const App = () => {

 const [query, setQuery] = useState('');

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
       <Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          data={DATA}
          value={query}
          onChangeText={setQuery}

          renderItem={({item}) => (
            <TouchableOpacity 
              onPress={() => {}}>
              <Text> 
                  {item.title}
              </Text>
            </TouchableOpacity>
          )}
        />
      </View>
    </SafeAreaView>  
  );
};

我将代码减少到最低限度。

但是，我不断收到错误消息： “对象作为 React 子对象无效（找到：带有键 {id,title} 的对象”

似乎我缺少关于 renderItem 的一些非常明显的东西（我猜），但由于我被困了几个小时，另一只眼睛可以发现我做错了什么......任何帮助将不胜感激，谢谢。

Answer 1

我真的找到了答案。

看来，我没有正确阅读 Autocomplete 的 props 列表：实际上，renderItem 必须在名为“flatListProps”的选项中传递。

正确代码如下：

import React, {useState, useEffect} from 'react';

import {
  SafeAreaView,
  StyleSheet,
  TextInput,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import Autocomplete from 'react-native-autocomplete-input';

const DATA =
[{"id": 1,"title": "test1"},{"id": 2,"title": "test2"},{"id": 3,"title": "test3"}]

const App = () => {

 const [query, setQuery] = useState('');

  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
       <Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          data={DATA}
          value={query}
          onChangeText={setQuery}

          flatListProps={{
            keyboardShouldPersistTaps: 'always',
            keyExtractor: (item) => item.id,
              renderItem: ( ({item}) => (
                <TouchableOpacity 
                  onPress={() => {}}>
                  <Text> 
                      {item.title}
                  </Text>
                </TouchableOpacity>
              ))
          }}

        />
      </View>
    </SafeAreaView>  
  );
};

Answer 2

renderItem={({ item, i }) => (
                  <TouchableOpacity key={i} onPress={() => ()}>
                    <Text>{item.label}</Text>
                  </TouchableOpacity>
                )}

您必须将索引传递给键。

Answer 3

你的解构是错误的。喜欢下面{id,title}。 renderItem 是迭代数组，所以它看起来像一个对象。

renderItem={({title,id}) => (
            <TouchableOpacity 
              onPress={() => {}}>
              <Text> 
                  {title}
              </Text>
            </TouchableOpacity>
          )}