Question

我正在使用 React Native 和 ASP .NET MVC 实体框架开发食品订购应用程序。我搜索屏幕带有日期（字段）和供应商列表（下拉菜单），当我点击搜索按钮时，它将导航到订单屏幕，并将日期和供应商 ID 作为参数并使用这 2 个参数从 API 获取数据并在订单屏幕中显示数据。但问题是它第一次显示正确的列表，第二次显示不同的日期和供应商 ID，而 API 获取正确的数据并显示以前的数据时，它没有更新订单屏幕中的列表。

搜索屏幕代码

<View style={[styles.container, { backgroundColor: colors.background }]}>
      <StatusBar style={theme.dark ? "light" : "dark"} />
      <CustomLoading isLoading={isLoading} />
      {/* Header */}
      <View style={styles.header}>
        <Animatable.View animation="bounceIn" duration={2000}>
          <Image style={styles.logo} source={images.FinalLogoOnLight} />
        </Animatable.View>
        <Animatable.Text
          animation="bounceInLeft"
          duration={2000}
          style={[styles.screenTitle, { color: colors.black }]}
        >
          Search/Filter Receipts
        </Animatable.Text>
      </View>

      {/* Form */}
      <View>
        {/* Date */}
        <TouchableOpacity
          style={[styles.datePickerWrapper, { backgroundColor: colors.white }]}
          onPress={showDatePicker}
        >
          <DateTimePickerModal
            isVisible={isDatePickerVisible}
            mode="date"
            value={model.date}
            onConfirm={handleConfirm}
            onCancel={hideDatePicker}
          />
          <Text style={{ color: colors.black, fontFamily: "PoppinsRegular" }}>
            {moment(model.date).format("YYYY-MM-DD")}
          </Text>
          <AntDesign name="calendar" color={colors.gray} size={sizes.h2} />
        </TouchableOpacity>

        {/* DropDown */}
        {/* <FormDropDown dropDownRef={dropDownRef} options={vendors} /> */}
        <View
          style={[
            styles.dropDownWrapper,
            {
              flexDirection: "row",
              marginTop: sizes.m10,
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: colors.white,
              borderColor: colors.grayLight,
            },
          ]}
        >
          {model.vendors != null ? (
            <FormPicker
              placeholderText="Select Vendor"
              selectedValue={model.vendorUserId}
              onValueChange={(val) => setModel({ ...model, vendorUserId: val })}
              data={model.vendors}
            />
          ) : null}
        </View>

        {/* Search Button */}
        <FormButton
          mystyle={{ marginTop: sizes.m20 }}
          buttonTitle="Search"
          onPress={() => handleSubmit()}
        />
      </View>

const handleSubmit = async () => {
    try {
      if (model.vendorUserId == "" && model.date == "") {
        Toast.show("Date or Vendor filed not be empty.");
        return;
      }
      navigation.navigate("RootOrder", {
        screen: "SearchedOrders",
        params: { searchedOrders: model },
      });
    } catch (error) {
      console.log(error);
      setIsLoading(false);
    }
  };

搜索订单屏幕

const [isLoading, setIsLoading] = useState(true);
  const [start, setStart] = useState(0);
const [model, setModel] = useState({
    data: [],
    token: userState.token,
    date: searchedOrders.date,
    vendorUserId: searchedOrders.vendorUserId,
    recordTotal: null,
  });

  // Functions
  const fetchOrderHistoryByDate = async () => {
    try {
      setIsLoading(true);
      var res = await orderHistoryByDate(model);
      if (!res.Success) {
        console.log("Error: ", res.Data);
        setIsLoading(false);
        alert(res.Data);
        return;
      }
      var resModel = res.Data;
    //   console.log(resModel)
      setModel({ ...model, data: resModel });
      // console.log(resModel);
      setIsLoading(false);
    } catch (error) {
      console.log(error);
      setIsLoading(false);
    }
  };
  // Functions END
  const init = async () => {
    await fetchOrderHistoryByDate();
    setIsLoading(false);
  };

  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      setStart(Math.random() * 10000);
      init();
    });
    return unsubscribe;
  }, [start]);

function renderCardItems({ item, index }) {
    return (<View style={styles.OrderItemWrapper}>
      <LinearGradient
        style={[styles.OrderItemWrapperLinearGrad]}
        colors={[colors.white, colors.linearGray]}
      >
        <TouchableOpacity
          // style={[styles.OrderItemWrapper, { backgroundColor: colors.white }]}
          onPress={() =>
            navigation.navigate("OrderDetails", { itemOrderDetails: item })
          }
          // key={index}
        >
          <View style={styles.cartItemWrapper}>
            <View style={styles.cartItemDetails}>
              <Text style={[styles.cartItemText, { color: colors.primary }]}>
                {item.ShopName}
                {/* ({index}) */}
              </Text>
              {/* <Text style={{ color: "#000" }}>{item.InvoiceNo}</Text> */}
              <Text
                style={[styles.cartItemQuantityText, { color: colors.gray }]}
              >
                {item.Date}
              </Text>
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}
              >
                <Text
                  style={[styles.cartItemPriceText, { color: colors.black }]}
                >
                  AED {item.Total}
                </Text>
                <View
                  style={[
                    styles.statusWrapper,
                    { backgroundColor: colors.primary },
                  ]}
                >
                  <Text style={[styles.statusText, { color: colors.white }]}>
                    {item.Status}
                  </Text>
                </View>
              </View>
            </View>
            <Image
              source={{
                uri: `${domain}${item.ShopPicture}`,
              }}
              style={styles.cardItemImage}
            />
          </View>
        </TouchableOpacity>
      </LinearGradient>
    </View>);
  }

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <StatusBar style={theme.dark ? "light" : "dark"} />

      <CustomLoading isLoading={isLoading} />
      <FlatList
        data={model.data}
        renderItem={renderCardItems}
        keyExtractor={(item, index) => item.InvoiceNo + "_" + index}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        style={{ marginTop: sizes.m10 }}
        style={{
          paddingVertical: sizes.m10,
          backgroundColor: colors.background,
        }}
      />
    </View>

Answer 1

您可以使用 navigation.push('screenName') 而不是 navigation.navigate('screenName')

反应导航：从屏幕导航到另一个显示先前数据的屏幕

1 个答案: