Как вставить значение setState в хук useEffect? - PullRequest
Новая
       21

Как вставить значение setState в хук useEffect?

1 голос
/ 11 апреля 2020

Я смотрел видео с YouTube и создал собственное приложение для рецептов. Я новичок в React. js, и я решаю эту проблему около 2 дней. Кажется, что я не могу передать значение моего состояния в ловушку useEffect. Вот пример моего кода. Ошибка говорит

"React Hook useEffect имеет отсутствующую зависимость: 'query'. Либо включите его, либо удалите массив зависимостей", и каждый раз, когда я вводил в поле ввода, он запускает ловушку useEffect. Спасибо и ваша помощь очень ценится. 

const [recipes, setRecipes] = useState([]);
const [search, setSearch] = useState('');
const [query, setQuery] = useState('steak');

const updateSearch = e => {
    setSearch(e.target.value);
    console.log(search)
}

const getSearch = e => {
    e.preventDefault();
    setQuery(search);
}

useEffect(() => {   // error Is from the Query variable
    const GetRecipe = async () => {
        const APP_ID = "3834705e";
        const APP_KEY = "c23e9514f82c2440abf54b21edd4c3dc";
        const res = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`);
        const data = await res.json();
        setRecipes(data.hits);
      }
    GetRecipe();
},[getSearch]) //this triggers everytime I typed in the input box which is not it is supposed to

return(
    <div className='recipelist'>

        <form onSubmit={getSearch}>
            <input type="search" onChange={updateSearch}/>
            <button type='submit'>submit</button>
        </form>

1 Ответ

1 голос
/ 11 апреля 2020

Как показывает ошибка, при использовании хука useEffect этот хук может получить два аргумента, первый - это эффект обработчика, а второй - массив, содержащий все зависимости, которые будет использовать этот эффект, так что вы используя состояние запроса в URL-адресе http, вам нужно передать эту зависимость в массив, поэтому может быть что-то вроде этого. 

useEffect(() => {   // error Is from the Query variable
    const GetRecipe = async () => {
        const APP_ID = "3834705e";
        const APP_KEY = "c23e9514f82c2440abf54b21edd4c3dc";
        const res = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`);
        const data = await res.json();
        setRecipes(data.hits);
      }
    GetRecipe();
},[getSearch, query])

, так что же на самом деле делает зависимость от массива, как говорит React docs, массив Зависимость используется для проверки того, должен ли эффект выполняться снова на основе его зависимостей, поэтому в вашем коде все, что вы вводите, метод getSearch снова и снова создает в памяти, поэтому он проверит последнюю функцию getSearch, которая он взял и сравнил его с новыми, так что он будет проверяться так же, как fn1 === fn2, так что обе функции абсолютно одинаковы, обе сохраняют разное пространство в памяти, поэтому оба объекта разные, проверьте это документы , чтобы понять концепцию.

Здесь у вас есть реакция документы тоже

...