Question

我有一个问题，如何告诉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末尾的[]中设置参数即可。

如何告诉useEffect等待数据

2 个答案: