我只想输出仪表板中的产品，其中数量小于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语句中进行析构函数，而是传递了3个参数，这会使它出错。。。

在地图声明中这样做：

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>