React Native SearchBar Invariant Violation error «функция ожидалась, вместо этого получила значение объекта» - PullRequest
Новая
       53

React Native SearchBar Invariant Violation error «функция ожидалась, вместо этого получила значение объекта»

0 голосов
/ 08 января 2020

Я использую <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 (иногда даже прежде, чем что-либо вводить), приложение взломает sh, и у меня будет ошибка

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

1 Ответ

1 голос
/ 08 января 2020

Вам нужно изменить это: 

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

на ... 

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

Подумайте об этом так. Каждый раз, когда компонент перерисовывается, каждая строка кода запускается снова. В вашей исходной версии это означает, что функция будет выполняться с каждым отдельным рендерингом.

В новой версии это просто означает, что функция объявлена, но не запущена. Вы просто делаете его доступным для компонента SearchBar для выполнения, когда пользователь нажимает кнопку поиска.

Надеюсь, что это имеет смысл. Вы увидите, что этот точный сценарий очень подходит! :)

...