#reactjs #react-functional-component #rerender
Вопрос:
У меня есть рабочий стол с тремя компонентами react, Продуктами, боковой панелью и категорией. На главном экране есть собственное действие отправки, а также планер дальности и категория. Итак, когда загружается рабочий стол, действие listProduct запускается трижды, потому что все компоненты отправляют это действие, поэтому продукты отображаются трижды.
Я хочу прекратить эту повторную визуализацию.
Рабочий стол:
const HomeScreen = () =gt; { const dispatch = useDispatch() const productList = useSelector((state) =gt; state.productList) const { loading, error, products } = productList // console.log(products) useEffect(() =gt; { dispatch(listProducts(100000, '')) }, [dispatch]) return ( lt;gt; lt;Col style={{ maxWidth: '20%', marginLeft: '-300px', marginRight: '-100px', backgroundColor: '#f0f0f0', padding: '20px' }}gt; lt;Rowgt; lt;SideBar /gt; lt;/Rowgt; lt;Row style={{ marginTop: '30px' }}gt; lt;Category /gt; lt;/Rowgt; lt;/Colgt; {loading ? ( lt;Loader /gt; ) : error ? ( lt;Message variant='danger'gt;{error}lt;/Messagegt; ) : ( lt;Col style={{ marginTop: '-80px' }} gt; lt;Rowgt; {products.map((product) =gt; ( lt;Col key={product._id} sm={12} md={6} lg={4} xl={3}gt; lt;Product product={product} /gt; lt;/Colgt; ))} lt;/Rowgt; lt;/Colgt; )} lt;/gt; ) } export default HomeScreen; Дальнобойная горка:
const SideBar = () =gt; { const dispatch = useDispatch() const [value, setValue] = useState(10) const [finalValue, setFinalValue] = useState(null) // console.log(value) // const productList = useSelector((state) =gt; state.productList) // const { products } = productList useEffect(() =gt; { dispatch(listProducts(finalValue, '')) }, [dispatch, finalValue]) return ( lt;gt; lt;Form.Label column sm="6"gt; Price Range: lt;/Form.Labelgt; lt;RangeSlider max={1000} value={value} onChange={e =gt; setValue(e.target.value)} onAfterChange={e =gt; setFinalValue(e.target.value)} size='sm' /gt; lt;/gt; ) } export default SideBar; Category:
const Category = () =gt; { const dispatch = useDispatch() const [value, setValue] = useState('') // console.log(value) useEffect(() =gt; { dispatch(listProducts('', value)) }, [dispatch, value]) return ( lt;gt; lt;Formgt; lt;Form.Label column sm="6"gt; Category: lt;/Form.Labelgt; {['radio'].map((type) =gt; ( lt;div key={`inline-${type}`} className="mb-3"gt; lt;Form.Check inline label="Electronics" name="group1" type={type} value='Electronics' onChange={e =gt; setValue(e.target.value)} id={`inline-${type}-1`} /gt; lt;Form.Check inline label="Clothing" name="group1" type={type} value='Clothing' onChange={e =gt; setValue(e.target.value)} id={`inline-${type}-2`} /gt; lt;Form.Check inline label="Food amp; Beverage" name="group1" type={type} value='Food amp; Beverage' onChange={e =gt; setValue(e.target.value)} id={`inline-${type}-3`} /gt; lt;/divgt; ))} lt;/Formgt; lt;/gt; ) } export default Category Product:
const Product = ({ product }) =gt; { return ( lt;Card className='my-3 p-3 rounded' style={{ marginRight: '20px' }}gt; lt;Link to={`/product/${product._id}`}gt; lt;Card.Img src={product.image} variant='top' /gt; lt;/Linkgt; lt;Card.Bodygt; lt;Link to={`/product/${product._id}`}gt; lt;Card.Title as='div'gt; lt;strong id="title" style={{ textDecoration: 'none' }}gt;{product.name}lt;/stronggt; lt;/Card.Titlegt; lt;/Linkgt; lt;Card.Text as='h3'gt;${product.price}lt;/Card.Textgt; lt;/Card.Bodygt; lt;/Cardgt; ) } export default Product