React Native自定义hook出现ReferenceError: Can't find variable: term错误

错误根源 #

自定义hook useResults.js 里的 searchApi 函数尝试使用term作为API请求参数，但该函数既没接收外部传入的term参数，也没在hook内部定义这个变量，导致变量未定义报错。

修复步骤 #

1. 修改useResults.js文件 #

更新searchApi函数，让它接收term参数，并在请求参数中使用该变量：

import React,{useState,useEffect} from 'react';
import yelp from '../api/yelp';

export default () => {
  const [results, setResults] = useState([])
  const [errorMessage, setErrorMessage] = useState('')

  // 接收传入的term参数
  const searchApi = async (term) => {
    try {
      const response = await yelp.get('/search', {
        params: {
          limit:50,
          term, // 使用传入的term参数
          location: 'san jose'
        } 
      })
      console.log(term)
      setResults(response.data.businesses)
    } catch (err) {
      setErrorMessage('Something Went Wrong')
      console.log(err)
    }
  };

  useEffect(() => {
    searchApi('pizza')
  },[]);

  return [searchApi, results, errorMessage]
}

2. 确认调用逻辑正确性 #

SearchScreen.js中已经正确传递了term参数，无需修改：

onTermSubmit={()=> searchApi(term)}

useEffect里的初始调用searchApi('pizza')也符合要求。

额外规范修正（非当前错误，建议优化） #

SearchScreen组件参数写法不规范，可调整为：

// 原写法
const SearchScreen = (searchTerm) => {
// 修改为（无需props时）
const SearchScreen = () => {

验证修复结果 #

重新运行应用，错误会消失，可通过搜索框提交不同关键词，验证Yelp API的数据请求是否正常工作。

内容的提问来源于stack exchange，提问作者user3305642