Блог

это мой компонент фильтра, в котором я извлекаю определенные продукты на основе значения radio и устанавливаю его в соответствии со своим состоянием.

 const [products, setProducts] = useState(null);

  const handleOnChange = (e) => {
    axios.get(`/store?limit=4amp;skip=0amp;sortBy=price:ascamp;subcategory=${e.currentTarget.value}`)
    .then(response => {
      setProducts(response.data)
    })
  }
  
  return (
    <>
      <Accordion defaultActiveKey='0' style={{ paddingBottom: 16 }}>
        <Card id='CCFilterCard'>
          <Accordion.Toggle id='CCFilterHeader' as={Card.Header} eventKey='0'>
            SUB CATEGORY
          </Accordion.Toggle>
          <Accordion.Collapse eventKey='0'>
            <Card.Body>
              <label className='radioContainer'>
                <input onChange={handleOnChange} type='radio' value='gaming' id='radioInput' />
                <span className='radiomark'></span>
                Gaming Laptops
              </label>
            </Card.Body>
          </Accordion.Toggle>
       </Card>
     </Accordion>
   </>
  

В этом компоненте продукта я извлекаю все продукты и устанавливаю их в свое состояние.

Что мне нужно, так это то, что я хочу заменить все продукты отфильтрованными данными о продуктах для этого компонента.

 export default class ProductCard extends Component {
  state = {
    loading:true,
    products:null,
    click:4
  }

  componentDidMount(){
    axios.get('/store?limit=4amp;skip=0amp;sortBy=price:ascamp;category=laptop')
    .then(response => {
      this.setState({loading:true});
      this.setState({products:response.data});
      this.setState({loading:false});
    })
  }
if(this.state.loading){
   return <h1>Loading...</h1>
}

 return (
      <React.Fragment>
        <Row>
          {
            this.state.products.map( product => {
              return (
                <Col
                  lg={4}
                  md={4}
                  sm={6}
                  xs={6}
                  style={{ paddingBottom: 24, marginTop: "20px" }}>
                  <NavLink to={'/container/productdetails/'   product._id}>
                    <Card id='stackBottom'/>
                    <Card id='displayCard'>
                      <Col style={{ textAlign: "center" }}>
                        <motion.div
                          whileHover={{ scale: 1.04 }}
                          whileTap={{ scale: 0.9 }}>
                          <Image
                            src={require("./laptopImages/legion.png")}
                            style={{ marginTop: "-21px" }}
                            id='productImage'
                          />
                        </motion.div>
                      </Col>
                      <Card.Body>
                        <Card.Text id='productTitle' className='module line-clamp'>
                          {product.productName}
                        </Card.Text>     
                      </Card.Body>
                    </Card>
                  </NavLink>
                </Col>
           </Row>
        </React.Fragment>
              )
            })
          }
  

Мне действительно понадобилась бы ваша помощь! заранее спасибо 🙂

Один из способов этого — использовать redux в вашем проекте и иметь центральное состояние продукта.таким образом, когда вы обновляете данные о продукте в компоненте filter, они также будут автоматически обновлены для компонента products. Вы можете настроить redux в своем проекте React native, используя эту ссылкуhttps://hub.packtpub.com/how-get-started-redux-react-native /

и после настройки redux ваш код будет выглядеть примерно так

 const products = useSelector((state) => state.products);
const dispatch = useDispatch()
  const handleOnChange = (e) => {
    axios.get(`/store?limit=4amp;skip=0amp;sortBy=price:ascamp;subcategory=${e.currentTarget.value}`)
    .then(response => {
      dispatch(setProducts(response.data))
    })
  }
  
  return (
    <>
      <Accordion defaultActiveKey='0' style={{ paddingBottom: 16 }}>
        <Card id='CCFilterCard'>
          <Accordion.Toggle id='CCFilterHeader' as={Card.Header} eventKey='0'>
            SUB CATEGORY
          </Accordion.Toggle>
          <Accordion.Collapse eventKey='0'>
            <Card.Body>
              <label className='radioContainer'>
                <input onChange={handleOnChange} type='radio' value='gaming' id='radioInput' />
                <span className='radiomark'></span>
                Gaming Laptops
              </label>
            </Card.Body>
          </Accordion.Toggle>
       </Card>
     </Accordion>
   </>  

и ваш компонент продукта был бы чем-то вроде этого

 export default class ProductCard extends Component {
  state = {
    loading:true,
    click:4
  }
const products = useSelector((state) => state.products);
const dispatch = useDispatch();
  componentDidMount(){
    axios.get('/store?limit=4amp;skip=0amp;sortBy=price:ascamp;category=laptop')
    .then(response => {
      this.setState({loading:true});
      dispatch(setProducts(response.data))
      this.setState({loading:false});
    })
  }
if(this.state.loading){
   return <h1>Loading...</h1>
}

 return (
      <React.Fragment>
        <Row>
          {
            this.state.products.map( product => {
              return (
                <Col
                  lg={4}
                  md={4}
                  sm={6}
                  xs={6}
                  style={{ paddingBottom: 24, marginTop: "20px" }}>
                  <NavLink to={'/container/productdetails/'   product._id}>
                    <Card id='stackBottom'/>
                    <Card id='displayCard'>
                      <Col style={{ textAlign: "center" }}>
                        <motion.div
                          whileHover={{ scale: 1.04 }}
                          whileTap={{ scale: 0.9 }}>
                          <Image
                            src={require("./laptopImages/legion.png")}
                            style={{ marginTop: "-21px" }}
                            id='productImage'
                          />
                        </motion.div>
                      </Col>
                      <Card.Body>
                        <Card.Text id='productTitle' className='module line-clamp'>
                          {product.productName}
                        </Card.Text>     
                      </Card.Body>
                    </Card>
                  </NavLink>
                </Col>
           </Row>
        </React.Fragment>
              )
            })
          }