Question

如何告诉 useEffect 等待数据

2020-04-16

1913

reactjs react-hooks use-effect

我有一个问题，如何告诉 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;

Answer 1

如果您希望在单击按钮时发生这种情况，那么您不需要效果，而需要一个单击处理程序。

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)

Answer 2

如果您希望在安装组件时完成此操作，请像这样调用 useEffect：

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

这样就可以了，因为当您获得渲染时，api 调用将完成。如果您希望在更改状态时完成此操作，只需在 useEffect 末尾的 [] 内设置参数即可。