自定义钩子 function 未在 React 中调用

Question

我正在尝试调用我的fetchPlants function，但我无法弄清楚为什么它没有被调用。

/screens/RecipeScreen.js

import usePlants from '../hooks/usePlants';

// Call our custom hook
const [fetchPlants, plantResults] = usePlants();

// ...other code...

<RecipeSearch
  recipeSearch={recipeSearch}
  onRecipeSearchChange={setRecipeSearch}
  onRecipeSearchSubmit={() => fetchPlants(recipeSearch)}
/>

/components/RecipeSearch.js

const RecipeSearch = ({
  onRecipeSearchChange,
  onRecipeSearchSubmit,
  recipeSearch,
}) => {
  return (
    console.log(recipeSearch); // This prints out nicely...
    <View>
      <View>
        <TextInput
          placeholder='Find a plant...'
          value={recipeSearch}
          onChangeText={onRecipeSearchChange}
          onEndEditing={onRecipeSearchSubmit}
        />
      </View>
    </View>
  );
};

/hooks/usePlants.js

import { useState, useEffect } from 'react';
import plantsApi from '../api/plants';

export default () => {

  const [plantResults, setPlantResults] = useState([]);

  const fetchPlants = async searchTerm => {
    console.log('searchTerm... HERE IS THE QUERY', searchTerm); // this never gets hit
    try {
      const response = await plantsApi.get('').then(response => {
        console.log(response);
        setPlantResults(response);
      });
    } catch (err) {
      console.log(err);
    }
  };


  return [fetchPlants, plantResults];
};

我最初认为可能我调用fetchPlants()太早了（在recipeSearch有任何状态之前），但我不这么认为，因为它仍然能够正确地console.log(searchRecipe) 。

Answer 1

更新它一直在工作。 当我使用 iOS 模拟器对其进行测试时，我需要在计算机上按“ENTER”键，因为我使用的是 React Native onEndEditing道具。