Как сказать useEffect ждать данных - PullRequest
Новая
       6

Как сказать useEffect ждать данных

0 голосов
/ 16 апреля 2020

У меня есть вопрос, как сказать useEffect ждать, пока текст поступит из результатов поиска?
API содержит множество объектов, и я хочу получить один из них. 

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Search = () => {
    const [text, setText] = useState('');
    const [object, setObject] = useState(null);

    useEffect(() => {
        axios.get(`https://api/${text}`)
            .then(res => {
                setObject(text)
                console.log(object)
            })
            .catch(err => {
                console.log(err)
            })
    })

    const onChange = e => setText(e.target.value);

    return (
        <div>
            <form className="some-class">
                <input type="text" value={name} className="some-class" placeholder="I need information about..." onChange={onChange}/>
                <input type="submit" className="some-class" value="Search"/>
            </form> 
        </div>
        )
    }
    export default Search;

Ответы [ 2 ]

3 голосов
/ 16 апреля 2020

Если вы хотите, чтобы это происходило при нажатии кнопки, то вам не нужен эффект, вам нужен обработчик щелчка. 

const Search = () => {
    const [text, setText] = useState('');
    const [object, setObject] = useState(null);

    const onClick = () => {
        axios.get(`https://api/${text}`)
            .then(res => {
                setObject(text)
            })
            .catch(err => {
                console.log(err)
            })
    })

    const onChange = e => setText(e.target.value);

    return (
        <div>
            <form className="some-class">
                <input type="text" value={name} className="some-class" placeholder="I need information about..." onChange={onChange}/>
                <input onClick={onClick} type="submit" className="some-class" value="Search"/>
            </form> 
        </div>
    )
}
export default Search;

PS: в моем примере используется setObject(text), поскольку это то, что вы имели в своем коде, но, вероятно, это опечатка. Возможно, вы имели в виду setObject(res.data)

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

Если вы хотите, чтобы это было сделано, когда вы монтируете вызов compoennt, используйте useEffect следующим образом: 

useEffect(() => {
        axios.get(`https://api/${text}`)
            .then(res => {
                setObject(text)
                console.log(object)
            })
            .catch(err => {
                console.log(err)
            })
    }, []);

Это должно произойти, как при получении рендера, вызов API будет выполнен. Если вы хотите, чтобы это было сделано при изменении состояния, просто установите параметр внутри [] в конце useEffect.

...