基于类别的 React Native 更新平面列表

Question

我正在创建一个本机应用程序，我想根据类别更新平面列表，所以首先，我想呈现所有项目，当我单击特定类别更新时，这里的平面列表是我的代码

  const dispatch = useDispatch();
  const [categories, setCategories] = useState([]);
  const [promotions, setProm] = useState([]);
  const [brands, setBrand] = useState([]);
  const [currentCategoryId, setCurrentCategoryId] = useState()
  const { is_merchant } = useSelector(state => state.auth)

  useEffect(() => {
    const fetchCategories = async () => {
      const result = await dispatch(actions.main.loadCategories());
      setCategories(result.payload.data.data);
    }
    const fetchPromotion = async () => {
      const result = await dispatch(actions.main.getPromotions());
      setProm(result.payload.data.data);
    }
    const fetchBrand = async () => {
      const result = await dispatch(actions.main.getBrands());
      setBrand(result.payload.data.data);
    }
    fetchBrand()
    fetchPromotion()
    fetchCategories()
  }, [setCategories, setBrand, setProm]);

  const toggleBrands = (categoryId) => {
    setCurrentCategoryId(categoryId)
  };

这是带有类别组件的 flatlist 组件

 {<CategoriesList bounces horizontal contentContainerStyle={{ paddingLeft: 20 }} showsHorizontalScrollIndicator={false}>
              {categories.map(category =>
                <CategoryTile
                  category={category} key={category.id}
                  onPress={() => { toggleBrands(category.id) }}
                  selected={category.id === currentCategoryId} />)}
            </CategoriesList>}
            <Title fontSize={16} style={{ paddingLeft: 25 }}>
              All
            </Title>
            {<BrandsList
              horizontal={false}
              numColumns={2}
              data={brands.filter(brand => brand.category_id === currentCategoryId)}
              keyExtractor={item => item.id}
              renderItem={({ item }) => (<PromotionOffers brands={item} key={item.id}
                navigation={navigation}
                onPress={() => navigation.push('BrandDetailsPage', { brand: item, promotions, is_merchant })} />)}
              onEndReachedThreshold={.5}
              contentContainerStyle={{ justifyContent: 'center', alignSelf: 'center' }}
              nestedScrollEnabled={true}
            />}

Answer 1

更新品牌列表数据源如下

data={currentCategoryId  ? brands.filter(brand => brand.category_id === currentCategoryId):brands}