我想最初从 api 加载第一个元素，但在更改其他用户数据后，组件返回到第一个元素数据

Question

//这里我想最初显示第一个数组数据，但不是在每次状态更改或 api 调用时显示

useEffect(() => {
    data?.delivery_boys?.map((d, index) => {
      if (index === 0) {
        setDeliveryBoy(d);
      }
    });
    return () => {
      data;
    };
  }, [data]);

//这里我再次改变数据和设置状态

 const handleOnSubmit = () => {
    setAssignCustomerId(assignCustomerId);
    console.log(assignCustomerId, "assgnied ");
    toggleModal();
    const id = typeof deliveryBoy !== "undefined" && deliveryBoy.id;
    const params = { deliveryBoyId: id, assignCustomerId };
    assignCustomerMutation.mutate(params, {
      onSuccess: (data) => {
        setDeliveryBoy(data?.delivery_boy);
        queryClient.setQueryData([GET_DELIVERY_BOY_LIST.name, params], data);
        queryClient.invalidateQueries([GET_DELIVERY_BOY_LIST.name]);
      },
    });
  };

Answer 1

我认为 useEffect 中你想要的行是仅在没有 deliveryBoy 的情况下设置它。

useEffect(() => {
    if (!deliveryBoy){
      // your code
    }

  }, [data]);

但是在 useEffect 中，我认为你也不需要映射所有项目，所以你可以这样重写它：

useEffect(() => {
    if (!deliveryBoy) {
      setDeliveryBoy(data?.delivery_boys?.[0])  
    }
  }, [data]);

我想最初从 api 加载第一个元素，但在更改其他用户数据后，组件返回到第一个元素数据

i want to load first element from api initially , but after making change to other user data the component goes back to first element data

reactjs

react-hooks

use-effect