重新更新数据时 UseEffect 挂钩无法正常工作？

Question

我有一个订单列表，我正在使用 FlatList 来呈现它们， 我有 2 个主要概念我应该有“加载更多，拉到刷新”

在我的情况下，用户可以编辑订单然后拉动刷新以获取新更新的数据，另一种情况是加载更多“分页”。

所以 加载更多功能正常工作，并从服务器获取新数据并推送到带有旧数据的状态，

BUT pull to refresh不起作用，setState时并没有更新数据，虽然触发了获取数据的函数，我可以在控制台看到更新的数据，它只是渲染旧数据！

这是一个代码 sn-p。

const OpenedAppointments = () => {
  const [openedAppointment, setOpenedAppointment] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [lastPage, setLastPage] = useState(null);
  const [loading, setLoading] = useState(false);
  const [isFetch, setIsFetch] = useState(false);


 const loadMoreOrders = () => {
    if (currentPage <= lastPage - 1) {
      setLoading(true);
      setCurrentPage((prevPage) => prevPage + 1);
      console.log('loadMore??');
    }
  };


  const getOpenOrders = useCallback(() => {
    let AuthStr =
      'Bearer ';

    const headers = {
      'Content-Type': 'application/json',
      Authorization: AuthStr,
    };
    Api.post(
      `/open_orders?page=${currentPage}`,
      {},
      {
        headers,
      },
    )
      .then((res) => {
        let last_Page = res.data.open_orders.last_page;
        let allOpenedOrders = res.data.open_orders.data;
        console.log('allOpenedOrders', allOpenedOrders);
        console.log('last_Page', last_Page);
        console.log('currentPage', currentPage);
        setLastPage(last_Page);
        setOpenedAppointment((prevOpenedOrders) => [
          ...prevOpenedOrders,
          ...allOpenedOrders,
        ]);
        setLoading(false);
        setIsFetch(false);
      })
      .catch((err) => console.log('err', err));
  }, [currentPage]);
    
 // Delete Appointments
  const cancelAppointem = (appointmentID) => {
    let AuthStr =
      'Bearer...';

    const headers = {
      'Content-Type': 'application/json',
      Authorization: AuthStr,
    };
    Api.post(
      '/cancel/order',
      {
        id: appointmentID,
      },
      {
        headers,
      },
    )
      .then((res) => {
        setIsOpenedCancelModal((opened) => !opened);
        console.log(res.data);
        setOpenedAppointment((prev) =>
      prev.filter((item) => item.id !== appointmentID),
    ); // works very well
      })
      .catch((err) => console.log(err));
  };

  const _refresh = () => {
    setIsFetch(true);
    getOpenOrders();
  };

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

  const keyExtractor = (item, index) => String(index);



  return (
    <FlatList
      showsVerticalScrollIndicator={false}
      contentContainerStyle={styles.flatListCon}
      data={openedAppointment}
      ListEmptyComponent={renderEmpty}
      renderItem={renderItems}
      keyExtractor={keyExtractor}
      ListFooterComponent={_renderFooter}
      onEndReached={loadMoreOrders}
      onEndReachedThreshold={0.1}
      onRefresh={_refresh}
      refreshing={isFetch}
    />
  );
};

找出问题

在第一次渲染时，我从 API 获得了 5 个订单，如果我更新第一个订单然后拉动刷新，我再次获得相同的 5 个订单，但第一个订单已更新 所以在getOpenOrders 函数中，它将旧订单与新订单合并，所以我可以看到重复的订单前 5 个订单“旧数据” 第二个 5 顺序“更新数据”。

但是我有其他概念可以加载更多“分页”，所以我应该让合并的数组在下一页“2”中获得新订单，而前一页中的上一个订单是“1”！

那么我该如何解决这个问题？

编辑数据结构响应

open_orders = [
   {id: 14, status: "Cash", cost: "25.00", service_id: 11, vendor_id: 3, …}
   {id: 15, status: "Cash", cost: "25.00", service_id: 11, vendor_id: 3, …}
    ...
]

Answer 1

你的效果应该听 isFetch

  const _refresh = () => {
    setIsFetch(true);
  };

  useEffect(() => {
    getOpenOrders();
  }, [isFetch]);

Answer 2

const [updatePage, setUpdatePage] = useState(1)
const [isUpdate, setIsUpdate] = useState(false)

// call `setUpdatePage` when you edit the data
/**
*  const edit = (record)=>{
*     ...
*     const updatePageIndex = openedAppointment.findIndex((item)=> item.id === record.id)
*     const updatePageNum = Math.ceil(updatePageIndex/openedAppointment.length)
*     setUpdatePage(updatePageNum)
*     setIsUpdate(true)
*  }
*  
**/
const getOpenOrders = useCallback(() => {
    const pageNum = isUpdate ? updatePage : currentPage
    let AuthStr =
      'Bearer ';

    const headers = {
      'Content-Type': 'application/json',
      Authorization: AuthStr,
    };
    Api.post(
      `/open_orders?page=${pageNum}`,
      {},
      {
        headers,
      },
    )
      .then((res) => {
        let last_Page = res.data.open_orders.last_page;
        let allOpenedOrders = res.data.open_orders.data;
        ...
        if(openedAppointment.length > 0) {
          const newOpenedOrders = openedAppointment.map((item)=>{
             const target = allOpenedOrders.find(ele=> ele.id === item.id) || []
             return {
              ...item,
              ...target,
             }
          })
          setOpenedAppointment(newOpenedOrders);
        } else {
          setOpenedAppointment(allOpenedOrders)
        }
        setIsUpdate(false)
        ...
      })
      .catch((err) => console.log('err', err));
  }, [currentPage]);