如何将产品名称、颜色及其小于10的颜色数量输出为列表？

Question

[![这是来自Firebase的以下数据。请注意，有些产品在每个产品中有 1、2 或 3 种颜色。我要输出小于10的颜色和颜色数量][1]][1]

[![这是代码的输出。这就是我想要的样子。但是在输出中，您可以看到颜色与数量太接近，并且产品 Tumbler 输出的颜色不小于 10。][2]][2]

This is the code that I'm having trouble with.

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

Answer 1

您可以添加另一个 filter() 以获得值小于 10 的颜色，如下所示：

<p className="pt-2">
  {val.prodName}
  {Object.entries(val.colorMap)
    // Filter for colors with value < 10
    .filter((c) => c[1] < 10)
    .map((c) => (
      <p>
        {c[0]}
        {c[1]}
      </p>
    ))}
</p>

如何将产品名称、颜色及其小于10的颜色数量输出为列表？

How can I output the product name, the color and its color quantity that is less than 10 as a list?

firebase

reactjs

react-native

google-cloud-firestore

react-hooks