ReactJS Axios, the web api is called more then once

Question

The code below get records from a web api. That's work, I get back the only record. But I don't understand why the WebApi is called 8 times.

Do you have an idea why ?

const Customer = () => {
    const [httpRequestDone, setHttpRequestDone] = useState(false);
    const [data, setData] = useState([]);

    if (!httpRequestDone) {
        axios({
            method: 'get',
            url: 'https://localhost:44368/api/Customer/AllCustomers',
        })
        .then(res => {
            console.log(res.data);
            setData(res.data);
            setHttpRequestDone(true);
        });   
    } 


    return (
        <div className="customer">
        <Navigation />       
        <ul>
            {data.map(item => (
                <li key={item.customerId}>
                    <div>{item.customerId}</div>
                    <div>{item.lastName}</div>
                </li>
            ))}
        </ul>

      </div>
    );
};

export default Customer;

You should use `useEffect` https://stackoverflow.com/a/53219430/2873538 — Ajeet Shah, May 04 '21 at 16:04

score 1 · Answer 1 · answered May 04 '21 at 16:04

If you want the fetch to only happen once then use useEffect hook.

const Customer = () => {
    const [data, setData] = useState([]);

    useEffect(function(){
    axios.get('https://localhost:44368/api/Customer/AllCustomers').then(function(res){
        setData(res.data);
        console.log(res.data);
    })
}, [])


    return (
        <div className="customer">
        <Navigation />       
        <ul>
            {data.map(item => (
                <li key={item.customerId}>
                    <div>{item.customerId}</div>
                    <div>{item.lastName}</div>
                </li>
            ))}
        </ul>

      </div>
    );
};

export default Customer;

score 1 · Accepted Answer · answered May 04 '21 at 16:04

Instead of using the useState hook to determine if you should make your axios call, maybe try the useEffect hook instead.

const Customer = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        axios({
            method: 'get',
            url: 'https://localhost:44368/api/Customer/AllCustomers',
        })
        .then(res => {
            setData(res.data);
        });   
    }, [])

    return (
        <div className="customer">
        <Navigation />       
        <ul>
            {data && data.map(item => (
                <li key={item.customerId}>
                    <div>{item.customerId}</div>
                    <div>{item.lastName}</div>
                </li>
            ))}
        </ul>

      </div>
    );
};

export default Customer;

This will only make your axios call once, when the component mounts.

ReactJS Axios, the web api is called more then once

2 Answers2