<Table> 我正在尝试在我的应用程序中创建一个挂钩，但是当更新包含信息的常数时，屏幕上显示列表的组件不会再次渲染，但是列表已更新，因为挂钩返回它在控制台中更新（值得一提的是，首次加载组件时，它会正确渲染，但是当信息更改时，它不会更新）。

Question

updatelist

import { useState, useEffect } from 'react';
import useFetchData from '../services/api/showData';

const UpdateList = () => {
    const { data, loading, error, fetchData } = useFetchData();
    const [list, setList] = useState([]);

    const updateList = async () => {
        try {
            const newList = await fetchData();
            setList([...newList]);
            console.log('New list obtained:', newList);
        } catch (error) {
            console.error('An error occurred while updating your data', error);
        }
    };

    useEffect(() => {
        updateList();
    }, [fetchData]);

    return { list, loading, error, updateList };
};

export default UpdateList;

showdata

import { useState, useEffect, useCallback } from "react";
import axios from 'axios';

const useFetchData = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    const fetchData = useCallback(async () => {
        setLoading(true);
        try {
            const response = await axios('http://localhost/REACT/my-app/src/backend/php/api/mostrarDatos.php');
            if (!response.data.ok) {
                return console.error('An error occurred, please restart. If the issue persists, contact the administrator.');
            }
            setData(response.data.respuesta);
            return response.data.respuesta;
        } catch (error) {
            setError(error instanceof Error ? error : new Error("An unknown error occurred"));
            console.error("Error fetching data:", error);
            return [];
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => {
        fetchData();
    }, [fetchData]);

    return { data, error, fetchData };
};

export default useFetchData;

我需要在更新常数

lista

时，创建表的组件已更新，钩子正在工作，但没有重新呈现数据。
    

Custom Hook的函数名称应始终以“使用”为开始，根据React最佳实践和文档。您的“ usefetchdata”遵循这种情况，因此可以被视为钩子。但是“ UpdateList”看起来更像是一个反应组件，而不是钩子。您可以将其更改为“ UseUpdatelist”，以使其更加连贯和清晰。 此外，您也不必返回用于进行API调用的函数，因为您要返回使用API获取的列表。 您也在Usefetchdata中设置数据，但您在任何地方都没有使用它。您可以尝试以下操作：

在您的usefetchdata中，

const useFetchData = () => {
    //......
    return {data, loading, error}
}

在您的销售列表组件中，您可以直接致电您的USEFetchData。

const SalesList = () => {
    const { list, loading, error } = useFetchData();
    //.......
}

Answer 1