我只想output仪表板中的产品，其中数量少于10个。它在firestore中连接。 我该如何改进呢？

Question

{details.map((val, colorMap, prodName) => {

这是我对它的条件语句有点迷茫的地方

        if( colorMap < 10 ){
          return ( 
                  <ul>
                    <li key={prodName}><p className="pt-2">{val.prodName} </p></li>
                    <li><p className="pt-2">{}</p></li>
                  </ul>  
          );
        }
        return null;

Answer 1

我猜那里似乎有些混乱，而不是在map声明中解构你传递的是 3 arguments 这使得它 go 错误......

在 map 语句中这样做：

function mapperRender() {
  details.map(({val, colorMap, prodName}) => {
     if( colorMap < 10 ){
          return ( 
                  <ul>
                    <li key={prodName}><p className="pt-2">{val.prodName} </p></li>
                    <li><p className="pt-2">{}</p></li>
                  </ul>  
          );
        }
        return null;
   }
}

然后在 jsx 中：

<div>
  {mapperRender()}
</div>

Answer 2

最初您想过filter那些colorMap值小于 10 的对象，然后您需要对这些过滤后的元素进行map 。

在此示例中，我已将数据添加到 state。然后我过滤了数据，并使用该数据创建了列表项。

 const { useState } = React; // Pass in the data function Example({ data }) { // Add the data to state const [ state, setState ] = useState(data); // `filter` all the objects where the // colorMap is less than 10 into a new array function getFiltered(data) { return data.filter(obj => { return obj.colorMap < 10; }); } // Return an array of mapped JSX list items function createJSX(filtered) { return filtered.map(obj => { return <li key={obj.val}>{obj.prodName}</li> }); } // `filter` the data in state... const filtered = getFiltered(state); //...and use that to create the JSX return ( <ul>{createJSX(filtered)}</ul> ); } const data=[{val:1,colorMap:2,prodName:"Shoe"},{val:14,colorMap:14,prodName:"Bobby Davro"},{val:3,colorMap:3,prodName:"House"},{val:34,colorMap:34,prodName:"Barney"}]; ReactDOM.render( <Example data={data} />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>