useEffect - React Hook useEffect has a missing dependency: 'database'

Question

When I remove , []) dependencies it's okay, but creating an infinite loop - with it, I have this error and other elements are not working properly.

However, how can I fix it? I can't figure out why am I getting the error below:

Thanks

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})
            })
    }, []);

Does this answer your question? stackoverflow.com/questions/55938884/… — bas
– bas, Commented Jul 6, 2020 at 19:36
not really, they have [term], I don't pass anything. and I couldn't find the similarity - I would love to try any suggestions — Eliran Nider
– Eliran Nider, Commented Jul 6, 2020 at 19:51

joshwilsonvu · Accepted Answer · 2020-07-06 19:35:20Z

2

I would take the warning's suggestion and use the functional update form of 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}))
            })
    }, []);
}

answered Jul 6, 2020 at 19:35

joshwilsonvu

2,71911 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eliran Nider Over a year ago

I think it works, thanks - I'll check it through and will update an answer. thanks again!

bas · Accepted Answer · 2020-07-06 20:10:56Z

Alternative solution to Josh Wilson's: Including database in the dependency array.

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]);
}

Collectives™ on Stack Overflow

useEffect - React Hook useEffect has a missing dependency: 'database'

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related