如果我有几个组件，如何在表单提交时从后端更新数据

Question

在模式中提交表单后，我找不到更新组件的方法。这是我的页面：

我不明白的问题是：一旦我提交表单并且我的函数返回 true，我需要以某种方式从后端更新我的组件。

import React, {useState} from "react";
import AppLayout from "../../layout/AppLayout";
import Activities from "../activity/Activities";
import ActivityDetails from "../activity/ActivityDetails";
import ActivityDetailsNoData from "../activity/ActivityDetailsNoData";
import AddActivityModal from "../modals/AddActivityModal";
import {useModal} from "../../contexts/ModalContext";

function ActivityPage(props) {
    const [activityId, setActivityId] = useState(null);
    const { closeModal, openModal } = useModal();
    const [activityDataUpdated, setActivityDataUpdated] = useState(false);

    const loadActivityDetails = (activityId) => {
        setActivityId(activityId);
    }

    const modal = (title, onSuccess) => {
        openModal(AddActivityModal, {
            onClose: closeModal,
            title: title,
            onSuccess: async () => {
                closeModal();
                setActivityDataUpdated(!activityDataUpdated);
            },
        })
    }

    return (
        <AppLayout>
            <h1 className="text-2xl pb-3 text-white">Activity</h1>

            <div className="grid grid-cols-3 gap-4">
                <div className="flex flex-col gap-3">
                    <Activities
                        status="SUBMITTED"
                        title="Scheduled Scripts"
                        loadActivityHandler={loadActivityDetails}
                        openModal={() => modal("Create new")}
                        activityDataUpdated={activityDataUpdated}
                    />
                    <Activities
                        status="RUNNING"
                        title="Currently Running"
                        loadActivityHandler={loadActivityDetails}
                    />
                    <Activities
                        status="COMPLETED"
                        title="Run History"
                        loadActivityHandler={loadActivityDetails}
                    />
                </div>
                {activityId ? (
                    <div className="col-span-2 col-start-2">
                      <ActivityDetails activityId={activityId}/>
                    </div>
                  ) : (
                    <div className="col-span-2 col-start-2">
                      <ActivityDetailsNoData />
                    </div>
                  )
                }
            </div>
        </AppLayout>
    )
}

export default ActivityPage;

这是我的组件活动

import React, {useState, useEffect} from "react";
import * as Icon from "react-bootstrap-icons";
import moment from "moment/moment";
import button from "bootstrap/js/src/button";
import {useActivities} from "../../api/activities";
import Loading from "../ui/Loading";

function Activities(props) {
    const {data, isFetching} = useActivities(props.status);
    
    const loadActivityDetails = (activityId) => {
        props.loadActivityHandler(activityId);
    }

    return (
      <div className="bg-widget rounded-md w-full px-3 pt-3 pb-6">
        <div className="flex justify-between items-center">
          <h1 className="text-2xl text-white">{props.title}</h1>
          {props.status === "SUBMITTED" && (
            <button onClick={props.openModal} className="btn btn-primary">Create new</button>
          )}
        </div>
        <div className="bg-dark border-1 border-greyDark rounded mt-3">
          {isFetching ? (
            <Loading />
          ) : (
            data && data.results && data.results.length > 0 ? (
              data.results.map((item, index) => (
                <div
                  key={index}
                  className="flex justify-between items-center px-3 py-2 border-b border-greyDark"
                >
                  <button className="text-left" onClick={() => loadActivityDetails(item.id)}>
                    <div className="font-bold">{item.id}{item.plan}</div>
                    <div>{moment(item.timestamp).format('DD-MMM-YYYY HH:mm°')}</div>
                  </button>
                  <button className="flex gap-1 items-center bg-grey hover:bg-greyDark rounded py-2 px-2">
                    <Icon.List className="w-4 h-4 text-white" />
                    <Icon.CaretDownFill className="w-3 h-3 text-white" />
                  </button>
                </div>
              ))
            ) : (
              <p className="text-center py-3">No data</p>
            )
          )}
        </div>
      </div>
    )
}

export default Activities;

还有我的API请求

export const useActivityDetails = (activityId) => useQuery(
    {
        queryKey: [ACTIVITIES_DETAILS_QUERY_NAME, activityId],
        queryFn: () => api.get(`/activities/${activityId}`)
            .then((resp) => resp.data),
    }
)

我找不到再次获取数据的方法。有人可以帮我吗？

我正在尝试做一些这样的事情，但是这是不允许的，还有什么其他方法可以做到这一点？

const { data, isFetching, activityDataUpdated } = useActivities(props.status); 
    useEffect(() => {
        if (activityDataUpdated) {
            useActivities(props.status);
        }
    }, [activityDataUpdated]);

Answer 1

据我所知，可能有 3 种可能的方法来解决这个问题。

您可以更新响应，以便它也返回数据，您可以使用用于发出更新请求的数据，或者您可以再次获取数据。

根据 http 标准，非常近似的是，post 请求只期望资源的状态和位置，put 和 patch 可能除了响应的状态之外也不期望太多其他内容。因此，如果您想要响应，您可以自由地实现，但它可能不是最符合 http 标准的，但是您对此的关心程度取决于您的应用程序、您正在做什么以及您想如何进行。

要使用您可能已经拥有的状态数据更新组件，您需要确保它的设置方式可以在您想要使用它的地方轻松访问。因此，如果没有看到那部分代码，就无法真正给出进一步的建议。

所以要重新获取，你只需要知道资源的位置，似乎你可以获取具有状态属性的东西，如果道具如此，除非它是一个新资源并且你需要位置，那么它应该可以正常工作，但你不能调用有条件地反应钩子。

所以而不是

const { data, isFetching, activityDataUpdated } = useActivities(props.status); 
    useEffect(() => {
        if (activityDataUpdated) {
            useActivities(props.status);
        }
    }, [activityDataUpdated]);

你需要有类似的东西

const { data, isFetching, activityDataUpdated } = useActivities(props.status); 
    useEffect(() => {
        useActivities(props.status);
    }, [activityDataUpdated]);

如果可行，如果您想避免某些逻辑重复，即使它没有更新但效果运行，那么您必须将条件逻辑移至挂钩中。

希望有帮助