解决React useEffect中状态数组重复添加数据的问题

const [data, setData] = useState([]);

const addData = (newData) => {
    console.log(newData); // 单个对象
    setData(prevData => [...prevData, newData]);
    console.log(data); // 此时data可能还未更新，但每次addData都会触发重新渲染
};

useEffect(() => {
    axios
        .get(`http://localhost:3000/api/products/${pid}`)
        .then((res) => {
            addData(res.data); // 更新状态
        })
        .catch((err) => {
            console.log(err);
        });
}); // <--- 注意：这里缺少依赖项数组

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 假设axios已导入

function ProductDetail({ pid }) { // 假设pid作为props传入
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    // 辅助函数，用于将新数据添加到数组状态
    const addData = (newData) => {
        // 确保不会添加重复的数据，例如通过ID检查
        setData(prevData => {
            if (prevData.some(item => item.id === newData.id)) { // 假设newData有id属性
                return prevData; // 如果已存在，则不添加
            }
            return [...prevData, newData];
        });
    };

    useEffect(() => {
        setLoading(true);
        setError(null);

        axios
            .get(`http://localhost:3000/api/products/${pid}`)
            .then((res) => {
                addData(res.data); // 将获取到的数据添加到状态
            })
            .catch((err) => {
                console.error("数据获取失败:", err);
                setError("数据加载失败，请稍后再试。");
            })
            .finally(() => {
                setLoading(false);
            });
    }, [pid]); // 将pid作为依赖项，当pid变化时重新获取数据

    // 如果你只需要在组件挂载时获取一次数据，且pid在组件生命周期内不变，可以使用空数组
    // useEffect(() => {
    //     setLoading(true);
    //     setError(null);
    //     axios
    //         .get(`http://localhost:3000/api/products/${pid}`)
    //         .then((res) => {
    //             addData(res.data);
    //         })
    //         .catch((err) => {
    //             console.error("数据获取失败:", err);
    //             setError("数据加载失败，请稍后再试。");
    //         })
    //         .finally(() => {
    //             setLoading(false);
    //         });
    // }, []); // 空数组，只在组件挂载时执行一次

    if (loading) return <div>加载中...</div>;
    if (error) return <div>错误: {error}</div>;

    return (
        <div>
            <h1>产品数据</h1>
            <ul>
                {data.map((item, index) => (
                    <li key={item.id || index}>
                        {/* 假设item有name属性或其他可显示属性 */}
                        {item.name || JSON.stringify(item)}
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default ProductDetail;

// 这种用法通常会导致无限循环，应避免
useEffect(() => {
   axios
            .get(`http://localhost:3000/api/products/${pid}`)
            .then((res) => {
              addData(res.data); // 这会改变data
            })
            .catch((err) => {
              console.log(err);
            });
}, [data]) // data改变会触发此effect，导致无限循环