ReactJS Axios，网络 api 被调用多次

Question

下面的代码从网络中获取记录api。那是工作，我找回了唯一的记录。但是我不明白为什么WebApi被调用了8次。

你知道为什么吗？

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;

Answer 1

如果您希望只获取一次，请使用 useEffect 钩子。

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;

Answer 2

与其使用 useState 钩子来确定是否应该进行 axios 调用，不如尝试使用 useEffect 钩子。

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;

这只会让你的 axios 调用一次，当组件挂载时。

ReactJS Axios，网络 api 被调用多次

ReactJS Axios, the web api is called more then once

httprequest

reactjs

axios