使用 React hooks 获取输入值以在 oMdb api 上搜索

Question

我想使用 React Hooks 通过 oMdb api 进行电影搜索。 结果并不如预期。我似乎违反了一些我不明白的 React Hooks 规则。

这是代码。

挂钩搜索

商店内的 Hook。 （如果我在 console.log 中使用 searchMovies('star wars') 我可以看到星球大战电影和系列的结果。）

import React, { useState, useEffect } from "react";


const useSearchMovies = (searchValue) => {

    const API_KEY = "731e41f";
    const URL = `http://www.omdbapi.com/?&apikey=${API_KEY}&s=${searchValue}`

    // Manejador del estado
    const [searchMovies, setSearchMovies] = useState([])
    //Llamar y escuchar a la api
    useEffect(() => {
        fetch(URL)
            .then(response => response.json())
            .then(data => setSearchMovies(data.Search))
            .catch((error) => {
                console.Console.toString('Error', error)
            })
    }, []);
    return searchMovies;
};

沙盒上的输入

这里我有输入，可以使用控制台日志进行搜索以查看结果。

import React, { useState } from "react";
import searchMovies from "../store/hooks/useSearchMovies";

const Sandbox = () => {


    
    const [search, setSearch] = useState('')   
    const onChangeHandler = e =>{
        setSearch(e.target.value)
        console.log('Search result', searchMovies(search))
    } 

    const handleInput =()=> {
        
        console.log('valor del input', search)
    }
    
    return (
        <div>
            <h1>Sandbox</h1>
            <div>
                <input type="text" value={search} onChange={onChangeHandler}/>
                <button onClick={handleInput()}>search</button>

            </div>
        </div>
    )
}

export default Sandbox;

Answer 1

问题

你通过在嵌套函数（即回调处理程序）中有条件地调用你的钩子来打破钩子的规则。

import searchMovies from "../store/hooks/useSearchMovies";

...

const onChangeHandler = e => {
  setSearch(e.target.value);
  console.log('Search result', searchMovies(search)); // <-- calling hook in callback
} 

Hook 规则

仅在顶层调用 Hooks - 不要在循环内调用 Hooks， 条件或嵌套函数。

解决方案

如果我理解您的代码和您的用例，您想要获取/搜索仅当单击搜索按钮时。为此，我建议重构您的

useSearchMovies

挂钩，以返回包含适当参数的搜索函数。

示例：

const useSearchMovies = () => {
  const API_KEY = "XXXXXXX";

  const searchMovies = (searchValue) => {
    const URL = `https://www.omdbapi.com/?apikey=${API_KEY}&s=${searchValue}`;
    return fetch(URL)
      .then((response) => response.json())
      .then((data) => data.Search)
      .catch((error) => {
        console.error("Error", error);
        throw error;
      });
  };

  return { searchMovies };
};

用途：

import React, { useState } from "react";
import useSearchMovies from "../store/hooks/useSearchMovies";

const Sandbox = () => {
  const [search, setSearch] = useState('');
  const [movies, setMovies] = useState([]);

  const { searchMovies } = useSearchMovies();
  
  const onChangeHandler = e => {
    setSearch(e.target.value)
  };

  const handleInput = async () => {
    console.log('valor del input', search);
    try {
      const movies = await searchMovies(search);
      setMovies(movies);
    } catch (error) {
      // handle error/set any error state/etc...
    }
  }
    
  return (
    <div>
      <h1>Sandbox</h1>
      <div>
        <input type="text" value={search} onChange={onChangeHandler}/>
        <button onClick={handleInput}>search</button>
      </div>

      <ul>
        {movies.map(({ Title }) => (
          <li key={Title}>{Title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Sandbox;