我只想输出仪表板上的产品，在仪表板上的数量小于10，它是连接在消防局的。我怎样才能改善这一点？

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语句中破坏，而是传递了三个参数，这使得它出错了……

在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;
   }
}

然后在联合来文中：

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

Answer 2

最初，您希望将那些具有小于10的filter值的对象去掉，然后您需要对那些筛选的元素进行filter。

在本例中，我将数据添加到状态。然后，我过滤了数据，并使用这些数据来创建列表项。

​

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>

​