我怎样才能成功循环此布尔值以输出少于颜色数量的产品？

Question

这是我的 Firestore 及其以下数据。我希望我的代码检查颜色数量的 colorMap 是否输出颜色数量少于 10 的产品的 prodName。

![Firestore][1]

这是我在代码中遇到的错误。

This is the code. I'm not sure if the .filter is actually working.

{details.filter(details => details.color < 10).map((val) => {
        return (<ul>
                <li key={val.id}><p className="pt-2">{val.prodName} </p></li>
                </ul>
        );

      })}

This is my reference for getting the data in the firebase.

  const [details, setDetails] = useState([]);

  const userData = async () => {
  
  const q = query(collection(db, "products"));

  const querySnapshot = await getDocs(q);
  const data = querySnapshot.docs.map((doc) => ({
    ...doc.data(),
    id: doc.id,
  }));
  setDetails(data);
};

If you guys know how to do this with using the if statement. Please refer it to me. Thanks.

Answer 1

map()中的第二个参数是元素的索引，不是对象。尝试使用文档 ID 作为键：

key={val.id} // instead of {item.id}

此外，您应该创建 1 个列表，然后使用地图添加列表项，而不是为每个项目创建一个新列表：

<ul>
{details.filter((detail) => Object.values(detail.colorMap).find(c => c < 10)).map((val, item) => {
        return (<li key={val.id}><p className="pt-2">{val.prodName} </p></li>);
})}
</ul>

我怎样才能成功循环此布尔值以输出少于颜色数量的产品？

How can I successfully loop this Boolean to output a product with less than color quantity?

javascript

firebase

reactjs

react-native

google-cloud-firestore