React Native SearchBar Invariant Violation错误'函数预期，而是得到对象的值'

Question

我正在使用<SearchBar>中的react-native-elements，而我正尝试使用它，以便用户在键盘上按下enter或return时，项目将执行功能。

这是我的代码

const CategoryScrn = (props) =>{
    const [searchAPI, results, errorMessage] = searchResults();
    const [term, setTerm] = useState('')
    const city = props.navigation.state.params.city;
    const category = props.navigation.state.params.category;

    useEffect(() => {
        searchAPI(city,category,'');
    }, [])
return(
               <SearchBar
        placeholder="Search"
        onChangeText={setTerm}
        onSubmitEditing={searchAPI(city, category,`${term}`)}
        value={term}
        inputStyle={styles.input}
        inputContainerStyle={styles.inputContainer}
        containerStyle={styles.container}
        placeholderTextColor='white'
      />
)}

useEffect函数可以正常工作，因此我知道我的API调用中没有问题。但是，当我在SearchBar中输入文本（有时甚至没有输入任何内容）时，应用程序将崩溃，并且我将出现

的错误消息

Invariant Violation: expected 'onSubmitEditing' listener to be a function, instead got a value of 'object' type

Answer 1

您需要更改此：

onSubmitEditing={searchAPI(city, category,`${term}`)}

至...

onSubmitEditing={() => searchAPI(city, category,`${term}`)}

这样想。每次重新渲染组件时，每行代码都会再次运行。在您的原始版本中，这意味着该函数将在每个渲染器中均执行。

在新版本中，仅表示已声明该函数，但未运行。您只是使它可供SearchBar组件在用户按下搜索按钮时执行。

希望如此。您会看到很多确切的情况！ ：）