useEffect в пользовательском хуке не рендерится при удалении

Question

Я пытаюсь использовать ловушки и реализовать настраиваемый обработчик для обработки выборки данных после каждого обновления, которое я отправляю в API.

Однако мой настраиваемый обработчик не срабатывает при изменении так, как я этого хочу тоже. Для повторной визуализации необходимо дважды щелкнуть «Удалить». Примечание: я удалил некоторые функции из этого кода, так как они не относятся к вопросу.

    import React, { useState, useEffect } from "react"
    import {Trash} from 'react-bootstrap-icons'
    import InlineEdit from 'react-ions/lib/components/InlineEdit'

    function Board(){
        const [render, setRender] = useState(false)
        const [boards, setBoards] = useState([]);
        const [isEditing, setEdit] = useState(false)
        const [value, setValue] = useState("")
        const[newValue, setNewValue] = useState("")
        const [error, setError] = useState("")

        function useAsyncHook(setState, trigger) {
            const [result] = useState([]);
            const [loading, setLoading] = useState("false");
            useEffect(() => {
                async function fetchList() {
                    try {
                        setLoading("true");
                        const response = await fetch(
                            `http://localhost:8080/api/boards`
                        );
                        const json = await response.json();
                        setState(json)
                    } catch (error) {
                        //console.log(error)
                        setLoading("null");
                    }
                }
            fetchList()
            }, [trigger]);

            return [result, loading];
        }

        useAsyncHook(setBoards, render)

        const handleDelete = (id) => {
            console.log("delete clicked")
            setLoading(true);
            fetch(`http://localhost:8080/api/boards/` + id, {
                method: "DELETE",
                headers: {
                    "Content-Type": "application/json"
                },
            })
            setRender (!render)
        }

       return(
        <div>
            <ul>

                {boards.map(board => (
                <li key={board.id}>
                        <InlineEdit value={board.size} isEditing={isEditing} changeCallback={(event)=>handleSave (event, board.id)} />
                        <Trash onClick={()=>handleDelete(board.id)}/>
                    </li>
            </ul>
        </div>
        );

    }

    export default Board

Answer 1

ВАРИАНТ 1:

Может быть, вы хотите иметь крючок, который говорит вам, когда нужно брать доску, верно? Например:

const [auxToFetchBoard, setAuxToFetchBoard] = useState(false);

Затем в useEffect вы выполняете функцию fetchBoard при каждом изменении хука:

useEffect(fetchBoard, [auxToFetchBoard]);

Наконец, в вашей функции handleDelete, если Ваш запрос на удаление возвращается правильно, вы должны обновить auxToFetchBoard. Примерно так:

const handleDelete = (id) => {
    setIsLoading(true);
    setError("");

    fetch(yourURL, yourOptions)
        .then(res => {
            // check if response is correct and
            setIsLoading(false);
            setAuxToFetchBoard(!auxToFetchBoard);
        })
        .catch(() => {
            setIsLoading(false);
            setError("Error while deleting stuff");
        });
};

Примечание: я изменил имена isLoading и setIsLoading, потому что они более явные.

ВАРИАНТ 2:

Вместо того, чтобы снова и снова загружать доску, вы можете обновить свою доску (в этом случае ваш код будет в 8-й строке внутри функции handleDelete).

Надеюсь, это поможет.