React Native中如何将多个ID与嵌套数组中的ID匹配

你的代码目前返回的是包含匹配ID食物的整个分类对象（比如title为foodResturants.recommended的完整对象），但你实际需要的应该是那些ID与addedItems匹配的具体食物条目（比如id=0、4的食物对象）。

修正代码方案 #

方案1：获取所有匹配的食物条目（一维数组） #

用flatMap先把所有嵌套的foodItem展开成一维数组，再筛选出ID在addedItems中的条目：

const [addedItems, setItems] = useState(props.addItemsToCart);
const [selectedItems, setSelectedItems] = useState([]);

useEffect(() => {
  // 展开所有分类下的食物，再筛选ID匹配的条目
  const matchedItems = ResturentData.flatMap(category => category.foodItem)
    .filter(food => addedItems.includes(food.id));
  setSelectedItems(matchedItems);
}, [addedItems]);

方案2：保留分类信息的匹配结果 #

如果需要知道每个匹配食物所属的分类，可以这样处理：

useEffect(() => {
  const matchedItemsWithCategory = [];
  ResturentData.forEach(category => {
    const matchedFoods = category.foodItem.filter(food => addedItems.includes(food.id));
    if (matchedFoods.length > 0) {
      matchedItemsWithCategory.push({
        categoryTitle: category.title,
        foods: matchedFoods
      });
    }
  });
  setSelectedItems(matchedItemsWithCategory);
}, [addedItems]);

原代码不符合预期的原因 #

原代码中ResturentData.filter(...)是遍历每个分类对象，只要分类下有至少一个食物ID匹配，就把整个分类对象加入结果。最终得到的是分类数组，而非你需要的具体食物条目。

内容的提问来源于stack exchange，提问作者onlywork qwe