代码之家 › 专栏 › 技术社区 › devmrh

在useEffect钩子中使用外部函数get undefined

next.js reactjs

devmrh · 技术社区 · 4 年前

在里面 useEffect 钩子我使用了一个函数向api发送搜索请求。函数名称为 searchCharacters 并且它在组件外部。我出错了 TypeError: searchCharacters(...) is undefined 当我的代码在这一点上出错时。为什么?如何解决这个问题?

错误img:

function Dashboard() {

const [searchParam, setSearchParam] = useState("");
const [results, setResults] = useState([]);
const [isSearching, setIsSearching] = useState(false)
const debouncedSearchTerm = useDebounce(searchParam, 500);

useEffect(  ()=> {
        if(debouncedSearchTerm){

            setIsSearching(true);
            searchCharacters(debouncedSearchTerm).then(res => {
                setIsSearching(false);
                console.log("im search result", res);
                setResults(res);
            });

        }else{

            setResults([]);

        }
    }, [debouncedSearchTerm]);
}

function searchCharacters(search){
    api.get(`client/search?q=${search}`).then(
        (res) => {
            return res.data;
        }
    ).catch( e => {
        console.log(e);
        return [];
    })
}

export default Dashboard;

2 回复 | 直到 4 年前

Drew Reese 4 年前

searchCharacters 不会向链返回Promise。返回 api.get Promise链来自 搜索字符 .

function searchCharacters(search) {
  return api
    .get(`client/search?q=${search}`)
    .then((res) => {
      return res.data;
    })
    .catch((e) => {
      console.log(e);
      return [];
    });
}

或者稍微简洁一点

const searchCharacters = (search) =>
  api
    .get(`client/search?q=${search}`)
    .then((res) => res.data)
    .catch((e) => {
      console.log(e);
      return [];
    });