帶有 function 的 setState 創建無限循環

Question

我需要創建一些數據並將其設置為初始 state。

const initialState = [
{
    name: "Joe",
    email: "joe@lorem.com",
    username: "FOOOO",
    website: "www.foosite.com",
    address: {
        city: "New York",
        street: "Times Square",
        suite: "244/78",
        zipcode: "00000",
    },
},
];

在這里，我只是多次重新創建該數據，因為我需要更多數據。

const createSkeletons = useCallback(() => {
    const arr = [];
    let i;
    for (i = 0; i < 20; i++) {
        initialState.forEach((item) => arr.push(item));
    }
    console.log(arr);
    return arr;
}, []);

在這里將它們設置為 state，同時獲取真實數據。 同時渲染創建的數據。

useEffect(() => {
    setIsFetching(true);
    const initial = createSkeletons();
    setDesigners(initial);
    axios.get(`site.com`).then((res) => {
        setIsFetching(false);
        //setDesigners(res.data);
    });
}, [isFetching, createSkeletons]);

但是，這會創建一個無限循環。 我究竟做錯了什么？

Answer 1

您不需要使用useEffect來設置初始 state，您可以直接在useState中進行設置：

const [designers, setDesigners] = useState(createSkeletons());

useEffect(() => {
    setIsFetching(true);
    axios.get(`site.com`).then((res) => {
        setIsFetching(false);
        setDesigners(res.data);
    });
}, []);

Answer 2

useEffect with [isFetching, createSkeletons] 每次isFetching變化都會執行，問題是你在useEffect中修改了isFetching，所以會產生循環。 只是從參數中刪除 isFetching