我是一个相对较新的React开发人员，我试图只显示具有外部、内部、组合或附加服务类型的特定服务.到目前为止，我已经将这些服务映射到react组件中，并且能够显示从数据库中提取的每个服务.但是，我只想根据用户的 Select 显示"外部"服务或"内部"服务.
我目前的代码如下:
import React, { useEffect, useState } from 'react';
import Service from './Service';
import OffersService from '../../../services/OffersService';
import Button from '../../UI/Button';
const ServiceList = props => {
const [offers, setOffers] = useState([]);
const [service, setService] = useState('Exterior');
const exteriorTypeHandler = () => {
setService('Exterior');
};
const interiorTypeHandler = () => {
setService('Interior');
};
const comboTypeHandler = () => {
setService('Combo');
};
const addonsTypeHandler = () => {
setService('Add Ons');
};
const offersList = offers.map(offer => (
<Service
key={offer.id}
code={offer.serviceCode}
name={offer.serviceName}
description={offer.description}
type={offer.serviceType}
price={offer.salePrice}
/>
));
useEffect(() => {
getAllOffers();
}, []);
const getAllOffers = () => {
OffersService.getAllServices()
.then(response => {
setOffers(response.data);
})
.catch(err => {
console.log(err);
});
};
return (
<div>
<div className='flex justify-center space-x-4'>
<Button name='Exterior' onClick={exteriorTypeHandler} />
<Button name='Interior' onClick={interiorTypeHandler} />
<Button name='Combos' onClick={comboTypeHandler} />
<Button name='Add Ons' onClick={addonsTypeHandler} />
</div>
<ul>{offersList}</ul>
</div>
);
};
export default ServiceList;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>为了得到我想看到的结果，我try 了以下代码:
<ul>
{offersList.forEach(offer => {
if (offer.serviceType === service) {
return offer;
}
})}
</ul><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>我也try 过:
在我的UDE、我的讲座、YouTube或其他堆栈溢出帖子中，我找不到任何有帮助的东西，所以我感谢所有能提供的帮助！