React Native SearchBar 不变违规错误 'function expected, instead got a value of object'

Question

我正在使用 react-native-elements 中的 <SearchBar> 并且我正在尝试使用它以便当用户在键盘上按下 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 组件可以在用户按下搜索按钮时执行它。

希望这是有道理的。您会经常看到这种情况！ :)

React Native SearchBar 不变违规错误 'function expected, instead got a value of object'

React Native SearchBar Invariant Violation error 'function expected, instead got a value of object'

search

searchbar

react-native

react-native-elements