useEffect - React Hook useEffect 缺少依赖项：'database'答案

【问题标题】：useEffect - React Hook useEffect has a missing dependency: 'database'useEffect - React Hook useEffect 缺少依赖项：'database'
【发布时间】：2020-10-26 23:53:27
【问题描述】：

当我删除 , []) 依赖时没关系，但创建一个无限循环 - 使用它时，我遇到此错误并且其他元素无法正常工作。

但是，我该如何解决？我不知道为什么会出现以下错误：

谢谢

Line 74:8:  React Hook useEffect has a missing dependency: 'database'. Either include it or remove the dependency array. You can also do a functional
update 'setDatabase(d => ...)' if you only need 'database' in the 'setDatabase' call  react-hooks/exhaustive-deps

function AddOrder(props) {
    const [step, setStep] = useState(1)
    const [redirect, setRedirect] = useState(false)

    const [database, setDatabase] = useState({
        clients: [],
        orders: [],
        client: [],
        products: [],
        subProducts: [],
        filteredSubProducts: [],


useEffect(() => {

        axios.get('http://127.0.0.1:8000/api/clients')
            .then(res => {
                setDatabase({...database, clients: res.data})
            })
        axios.get('http://127.0.0.1:8000/api/orders')
            .then(res => {
                setDatabase({...database, orders: res.data})
            })
        axios.get('http://127.0.0.1:8000/api/products')
            .then(res => {
                setDatabase({...database, products: res.data})
            })
        axios.get('http://127.0.0.1:8000/api/subProducts')
            .then(res => {
                setDatabase({...database, subProducts: res.data})
            })
    }, []);

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/55938884/…
不是真的，他们有 [term]，我什么都没通过。我找不到相似之处 - 我很想尝试任何建议
如果您将 [database] 添加到 useEffect，警告就会消失

标签： reactjs react-hooks

【解决方案1】：

我会接受警告的建议并使用setDatabase的功能更新表格：

function AddOrder(props) {
    const [step, setStep] = useState(1)
    const [redirect, setRedirect] = useState(false)

    const [database, setDatabase] = useState({
        clients: [],
        orders: [],
        client: [],
        products: [],
        subProducts: [],
        filteredSubProducts: [],
    });

    useEffect(() => {
        axios.get('http://127.0.0.1:8000/api/clients')
            .then(res => {
                setDatabase(database => ({...database, clients: res.data}))
            })
        axios.get('http://127.0.0.1:8000/api/orders')
            .then(res => {
                setDatabase(database => ({...database, orders: res.data}))
            })
        axios.get('http://127.0.0.1:8000/api/products')
            .then(res => {
                setDatabase(database => ({...database, products: res.data}))
            })
        axios.get('http://127.0.0.1:8000/api/subProducts')
            .then(res => {
                setDatabase(database => ({...database, subProducts: res.data}))
            })
    }, []);
}

【讨论】：

我认为它有效，谢谢 - 我会检查并更新答案。再次感谢！

【解决方案2】：

Josh Wilson 的替代解决方案：在依赖数组中包含 database。

function AddOrder(props) {
    const [step, setStep] = useState(1)
    const [redirect, setRedirect] = useState(false)

    const [database, setDatabase] = useState({
        clients: [],
        orders: [],
        client: [],
        products: [],
        subProducts: [],
        filteredSubProducts: [],
    });

    useEffect(() => {
         axios.get('http://127.0.0.1:8000/api/clients')
            .then(res => {
                setDatabase({...database, clients: res.data})
            })
        axios.get('http://127.0.0.1:8000/api/orders')
            .then(res => {
                setDatabase({...database, orders: res.data})
            })
        axios.get('http://127.0.0.1:8000/api/products')
            .then(res => {
                setDatabase({...database, products: res.data})
            })
        axios.get('http://127.0.0.1:8000/api/subProducts')
            .then(res => {
                setDatabase({...database, subProducts: res.data})
            })
    }, [database]);
}

【讨论】：