Reactjs 在Axios中，web api被多次调用

下面的代码从web 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;

const Customer=（）=>{
const[httpRequestDone，setHttpRequestDone]=useState（false）；
const[data，setData]=useState（[]）；
如果（！httpRequestDone）{
axios({
方法：“get”，
网址：'https://localhost:44368/api/Customer/AllCustomers',
})
。然后（res=>{
console.log（res.data）；
setData（res.data）；
setHttpRequestDone（true）；
});   
} 
返回(

{data.map（项=>(

{item.customerId}
{item.lastName}

))}

);
};
导出默认客户；

如果希望提取只发生一次，请使用

useffect

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;

const Customer=（）=>{
const[data，setData]=useState（[]）；
useffect（函数（）{
axios.get（）https://localhost:44368/api/Customer/AllCustomers）。然后（函数（res）{
setData（res.data）；
console.log（res.data）；
})
}, [])
返回(

{data.map（项=>(

{item.customerId}
{item.lastName}

))}

);
};
导出默认客户；

如果希望提取只发生一次，请使用

useffect

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;

const Customer=（）=>{
const[data，setData]=useState（[]）；
useffect（函数（）{
axios.get（）https://localhost:44368/api/Customer/AllCustomers）。然后（函数（res）{
setData（res.data）；
console.log（res.data）；
})
}, [])
返回(

{data.map（项=>(

{item.customerId}
{item.lastName}

))}

);
};
导出默认客户；

不要使用

useState

钩子来确定是否应该进行axios调用，可以尝试使用

useffect

钩子

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;

const Customer=（）=>{
const[data，setData]=useState（[]）；
useffect（（）=>{
axios({
方法：“get”，
网址：'https://localhost:44368/api/Customer/AllCustomers',
})
。然后（res=>{
setData（res.data）；
});   
}, [])
返回(

{data&&data.map（项=>(

{item.customerId}
{item.lastName}

))}

);
};
导出默认客户；

---

当组件安装时，这只会使您的axios调用一次。

不要使用

useState

钩子来确定您是否应该进行axios调用，可以尝试使用

useffect

钩子

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;

const Customer=（）=>{
const[data，setData]=useState（[]）；
useffect（（）=>{
axios({
方法：“get”，
网址：'https://localhost:44368/api/Customer/AllCustomers',
})
。然后（res=>{
setData（res.data）；
});   
}, [])
返回(

{data&&data.map（项=>(

{item.customerId}
{item.lastName}

))}

);
};
导出默认客户；

---

当组件安装时，这只会使您的axios调用一次。

您应该使用

useffect

您应该使用

useffect