我想使用 React Hooks 使用 oMdb api 進行電影搜索。結果并不如預期。我似乎打破了一些我不理解的 React Hooks 規則。

這是代碼。

鉤搜索

商店里面的鉤子。（如果我在 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;

uj5u.com熱心網友回復：

問題

您通過在嵌套函式（即回呼處理程式）中有條件地呼叫您的鉤子來打破鉤子規則。

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

...

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

使用反應掛鉤獲取輸入值以在 oMdb api 上進行搜索

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/440163.html

標籤：反应 api 反应还原反应钩子 omdbapi

上一篇：我正在構建facebookgif發布專案，當我單擊gif時，它必須在文本區域中顯示。但是我遇到型別錯誤post.map并不好玩

下一篇：回應的json路徑-API再保證

使用反應掛鉤獲取輸入值以在oMdbapi上進行搜索

問題