自定義鈎子 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道具。