在响应本机挂钩中自动刷新数据

时间:2020-06-11 23:27:45

标签: reactjs react-native react-hooks react-native-android

我正在使用react native hook;我的应用是带有餐厅订单的列表,当我将订单分配给经销商时,我的列表和状态不会改变,即使我确实要刷新

但是我希望在数据更新后立即手动完成

请帮帮我 在useEffect中刷新是一种好习惯吗?

const OrdersList = () => {
  const [
    {
      selectedSubsidiary: {id: subsidiaryid = ''},
    },
  ] = useContext(GlobalContext);
  const [orders, setOrders] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const [flatListRef, setRef] = useState();

  const statusInfo = [
    {
      id: pending,
      icon: 'clock',
      route: ORDER_DETAIL,
    },
    {
      id: cooking,
      icon: 'cooking',
      route: PREPARING_ORDER,
    },
    {
      id: pickUp,
      icon: 'subsidiary-delivery',
      route: ORDER_DETAIL,
    },
    {
      id: waitingForDealer,
      icon: 'pending-driver',
      route: ORDER_DETAIL,
    },
  ];

  const setLoading = loading => {
    setRefreshing(loading);
  };

  const getOrders = async () => {
    try {
      setLoading(true);
      const _orders = await getOrdersBySubsidiaryApi(subsidiaryid);
      setOrders(_orders);
    } catch ({message}) {
      // eslint-disable-next-line no-alert
      alert(message);
    } finally {
      setLoading(false);
    }
  };

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

  const scrollTo = index => {
    flatListRef.scrollToIndex({animated: true, index: index});
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <View>
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
          {orders.map((data, index) => {
            if (
              data.id === cancel ||
              data.id === delivered ||
              data.id === inTransit ||
              data.id === assigned
            ) {
              return null;
            }
            return (
              <StatusRow
                key={index}
                data={data}
                statusInfo={statusInfo}
                index={index}
                scrollTo={scrollTo}
                refreshing={true}
              />
            );
          })}
        </ScrollView>
      </View>
      <FlatList
        data={orders}
        ref={ref => setRef(ref)}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={getOrders} />
        }
        renderItem={({item, index}) => {
          if (
            item.id === cancel ||
            item.id === delivered ||
            item.id === inTransit ||
            item.id === assigned
          ) {
            return null;
          }
          return (
            <View key={index}>
              <StatusContainer
                name={item.name}
                statusInfo={statusInfo}
                array={item.order}
                statusIndex={index}
                refreshing={true}
              />
            </View>
          );
        }}
      />
      <CustomModal />
    </SafeAreaView>
  );
};

enter image description here

0 个答案:

没有答案