如何有條件地更改 React Native 中平面列表上的數據？

Question

在我的應用程序中，我有這樣的場景：第一次打開時，我需要在屏幕上顯示所有公司，當用戶 select 一個類別時，我需要將我的FlatList的數據更改為選定的類別公司。 我對FlatList使用有條件的 select 數據，但這不起作用。 這是我的代碼：

const Home = (props) => {
  const dispatch = useDispatch();
  const companies = useSelector(state => state.companies.availableCompanies);
  const selectedCatCompanies = useSelector(state => state.selectedCatCompanies.availableSelectedCatCompanies)

  const loadCompanies = useCallback(async () => {
    await dispatch(CompaniesActions.fetchCompanies(1, 1, 1));
  }, [dispatch]);

  useEffect(() => {
    loadCompanies().then(() => {
      setIsLoading(false)
    })
  }, [dispatch, loadCompanies]);

  const renderCards = (itemData) => {
    return (
      <View style={styles.cardContainer}>
        <Card
          companyId={itemData.item.id}
          companyName={itemData.item.name}
          companyImage={itemData.item.image}
          companyMainAddress={itemData.item.mianAddress}
          companyPhoneNumber={itemData.item.telephoneNumber}
          companyDetails={itemData.item.details}
          onPress={() => { props.navigation.navigate('CardDetails')}}
        />
      </View>
    )
  }

  return (
    <SafeAreaView style={styles.screen}>
      <MainHeader />
      <SearchBar />
      <FlatList
        ListHeaderComponent={
          <>
            <Text style={styles.timeText}>Choose appropriate time:</Text>
            <View style={styles.timeContainer}>
              <PrimaryButton
                title='Choose a date'
                hasArrow={true}
                arrowSize={hp(2)}
              />
              <PrimaryButton
                title='Choose a time'
                hasArrow={true}
                arrowSize={hp(2)}
              />
            </View>
            <TypeSelection
              options={[
                { name: 'Premium', selected: false },
                { name: 'LifeStyle', selected: false },
                { name: 'Many Amenities', selected: false },
                { name: 'Gourment', selected: false },
              ]}
              selectedButtonStyles={styles.selectedButton}
              selectedButtonTextStyles={styles.selectedButtonText}
            />
          </>
        }
        nestedScrollEnabled={true}
        showsVerticalScrollIndicator={false}
        data={selectedCatCompanies == [] ? companies : selectedCatCompanies} //here is what I set 
        keyExtractor={item => item.id.toString()}
        renderItem={renderCards}
      />
    </SafeAreaView>
  )

這是我的屏幕截圖，以便更好地理解：

我從 2 個不同的 API 獲得我的公司。 使用此代碼，我僅在用戶 select 一個類別時才獲得我的公司，但如果未選擇類別，則不會顯示結果。 希望我能很好地解釋我的問題。

Answer 1

我沒有你的完整代碼，所以在這里釣魚。 根據您的代碼猜測，您使用的是 Redux。

第 1 步）將selectedCatCompanies == []更改為selectedCatCompanies.length === 0 [感謝 Linda 在評論中的輸入，我修改了這一步 1]

如果步驟 1 不成功，那么，

第 2 步）嘗試查看 CompaniesActions 操作創建者及其對應的 reducer，以確認您是否同時處理公司和 selectedCatCompanies 的用例。 我認為問題應該出在actions/reducer上。

如果步驟 2 不成功，那么，

第 3 步）我將控制台記錄 selectedCatCompanies state 以驗證它是否在 Redux 中正確記錄。 如果不是，我會 go 回到步驟 2。

如果步驟 3 也沒有成功，那么，

步驟 3) 如果您成功記錄 selectedCatCompanies state，那么您可以嘗試有條件地使用兩個不同的 FlatList，而不是嘗試有條件地呈現兩個不同的數據源。