Set state from API response

[rwb196884]

I need to get data from the API and then put it into state so that the user can edit it. (When the user has finished editing I will PUT it back.)

    let apiItems: SwrResponse<ItemDTO[]> = useDatasetItems(datasetId!, swrEnabled(api));
    useEffect(() => {
        if (!apiItems.isLoading) {
            if (apiItems.error) {
                setMessages({ type: MessageType.danger, message: `Failed to load items: ${apiItems.error.Title}.` });
            }
            else if (apiItems.data) {
                setItems(apiItems.data);
            }
        }
    }, [apiItems]);

The setItems is being called hundreds of times and causing error messages

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

WTF?

[rwb196884]

You seem to have to do this sort of thing

    let apiDatasets: SwrResponse<Dataset[]> = useDatasetGetAll(swrEnabled(api)); 
    useSwrResponse(
        apiDatasets,
        (data: Dataset[]) => {
            if (data.length === 1) {
                navigate(`/datasets/${apiDatasets.data![0].DatasetId}/categories`);
            }
        },
        (error: ProblemDetails) => {
            setMessages({ type: MessageType.warning, message: 'Failed to load datasets: ' + error.Title });
        }
    );

where

export function useSwrResponse<T>(
    response: SwrResponse<T>,
    handleSuccess: (data: T) => void,
    handleError: (error: ProblemDetails) => void
) {
    useEffect(() => {
        if (!response.isLoading) {
            if (response.error) {
                handleError(response.error);
            }
            else if (response.data) {
                handleSuccess(response.data);
            }
        }
    },
        [response.isLoading, response.data, response.error]
    );
}