react-native - 自定义反应本机自动完成输入不起作用

Question

我正在尝试构建自定义自动建议组件。我的建议列表没有显示。

Strings must be rendered in a <Text> component每当我清除该TextInput字段时，我也会收到错误消息。

我的数据格式如下：

const Data = [{name:'naebi', id:..},{}]

以下是App.js文件的完整代码。但与我的预期相反，我没有在TextInput. 我也尝试过 Flatlist，也尝试过更改宽度和高度。

import React, {useState} from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  } from 'react-native';
export default function (props) {
  const [filteredSugestions, setFilteredSugestion] = useState([])
  const [showSugestions, SetShowSugestions] = useState([])
  const [input, setInput] = useState()
  const filterSuggestions = (input) => {
    Data.filter((data) => {
      if(data.name.toLowerCase().includes(input.toLowerCase())){
        setFilteredSugestion(data)
        SetShowSugestions(true)
      }
    })
  }
  const SuggestionsListComponent = () => {
    return filteredSugestions.length ? (
        filteredSugestions.map((suggestion, index) => { 
          return (
            <Text>{suggestion.name}</Text> 
          );
        })
      
    ) : (
       <View >
        <Text>{input}</Text>
      </View>
    );
  };
  return (
    
      <View >
        <TextInput
        style={{height: 40}}
        placeholder="Type here to search"
        onChangeText={text => {
          setInput(text)
          filterSuggestions(text)
        }}
        />
        {showSugestions && input && <SuggestionsListComponent />}
      </View>
   
  );
}

标签： react-nativereact-hooksautocomplete