为什么在使用axios和React Table在Django数据库中添加或删除对象后,我的React table没有更新?

gpnt7bae  于 2023-05-30  发布在  Go
关注(0)|答案(1)|浏览(148)

将Django数据库中的数据放入React表
我尝试用数据生成一个JsonResponse,并在API/data中显示它。数据正确显示在URL上。然后,我尝试使用axios在TableComponent中加载数据,例如:

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

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('/api/data');
                setData(response.data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, []);

数据被加载到tableInstance中,如下所示:

const tableInstance = useTable({
        columns,
        data,
    })

它第一次工作,但当我添加或删除对象使用管理面板,它得到正确显示在API/数据地址,但它不会显示在我的表。

ax6ht2ek

ax6ht2ek1#

如果您只在此useEffect中使用setData(),则在组件安装后只会发生一次。
要更新UI(重新显示表)或者重新呈现组件,必须更新其状态。考虑在每次删除/添加对象时调用fetchData()(数据库更新)
或者如果你的删除/添加端点返回新的数据作为响应,那么这会更好,因为你可以利用响应直接更新状态。

相关问题