如何告诉 useEffect 等待数据答案

【问题标题】：How to tell useEffect to wait for data如何告诉 useEffect 等待数据
【发布时间】：2020-07-29 14:41:10
【问题描述】：

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

【问题讨论】：

您希望它在文本更改时发生吗？还是点击提交按钮时？
点击提交按钮时。对不起，我忘了提到它
stackoverflow.com/questions/56838392/…

标签： reactjs react-hooks use-effect

【解决方案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)

【讨论】：

【解决方案2】：

如果您希望在挂载组件时完成，请像这样调用 useEffect：

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

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

【讨论】：