질문

이것은 라디오 값을 기반으로 특정 제품을 가져와 내 상태로 설정하는 필터 component입니다.

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

  const handleOnChange = (e) => {
    axios.get(`/store?limit=4&skip=0&sortBy=price:asc&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>
   </>

이 제품 component에서 모든 제품을 가져와 내 상태로 설정합니다.

필요한 것은 모든 제품을 필터링 된 제품 데이터로이 component로 바꾸고 싶습니다.

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

  componentDidMount(){
    axios.get('/store?limit=4&skip=0&sortBy=price:asc&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>
              )
            })
          }

정말 당신의 도움을 사용할 수 있습니다! 미리 감사드립니다 :)

답변1

이를위한 한 가지 방법은 프로젝트에서 redux를 사용하고 중앙 제품 상태를 갖는 것이므로 필터 component에서 제품 데이터를 업데이트하면 제품 component에 대해서도 자동으로 업데이트됩니다. 이 링크를 사용하여 React 네이티브 프로젝트에서 redux를 설정할 수 있습니다. 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=4&skip=0&sortBy=price:asc&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>
   </>

Expand snippet

제품 component는 다음과 같습니다.

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=4&skip=0&sortBy=price:asc&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>
              )
            })
          }