मैं चाहता हूं कि हर बार जब मैं "ऐडकार्ट" पर क्लिक करूं तो एक ही घटक का एक नया दिखाई दे (एक और दांव> उदाहरण संख्या

const newBet: React.FC = () => {
  const [getAddCart, setGetAddCart] = useState([
    <BetsEmpty>Empty Cart</BetsEmpty>,
  ]);


  function addCart() {
    setGetAddCart([
        <Bets>
           Example Number
        </Bets>,
    ]);
  }

return(
        <AllBets>{getAddCart}</AllBets>
        <Button onClick={addCart}></Button>
)
}
1
Guilherme 23 अगस्त 2021, 22:39

2 जवाब

सबसे बढ़िया उत्तर

आपने अपने राज्य में React Components स्टोर कर लिया है जो कि उपयुक्त तरीका नहीं है! मैं इसके बजाय वस्तुओं की एक सूची संग्रहीत करने की सलाह देता हूं और फिर इसकी लंबाई की जांच करता हूं, यह खाली है, कुछ पाठ दिखाएं (उदाहरण के लिए आपकी टोकरी खाली है), अन्यथा इस सूची को एक उपयुक्त घटक के रूप में निम्नानुसार मैप करें:

const [state, setState]= useState([]);

फिर इसे निम्नानुसार उपयोग करें:

state.length === 0? <h1>your basket is empty</h1>:
state.map(item=><h1>{item}</h1>) //if your item is String, if not u can provide more complicated component, its just an example

तो आपका उपयोगकर्ता अनुसरण के रूप में एक और आइटम जोड़ सकता है:

setState([...state, NEW ITEM]);
2
Abbasihsn 23 अगस्त 2021, 22:50

आपको शायद संग्रहित वस्तुओं को अपने useState में जोड़ना चाहिए, न कि संपूर्ण JSX घटक में।

फिर आप इसमें वैल्यूज ऐड कर सकते हैं जैसे

const [cart, setCart] = useState([])

const addStuffToCart = (newItem) => setCart([...cart, newItem])

और सूची में सभी आइटम प्रस्तुत करने के लिए अपना कार्ट मैप करें

if (cart.length === 0) return <EmptyCart />
return cart.map(item => <ItemObject item={item} />)
1
PRSHL 23 अगस्त 2021, 22:45