एक रेसिपी ऐप करने का प्रयास करना, जहां एक बार जब आप बॉक्स चेक करते हैं, तो रेसिपी ऐरे अपडेट हो जाती है, और नीचे काउंटर को चेक करते ही अपडेट कर दिया जाता है। अब तक, मैं केवल एक या दूसरे को करने में सक्षम हूं, अगर मैं सरणी में सामग्री जोड़ता हूं, तो मैं काउंटर को अपडेट नहीं कर सकता, और यदि मैं काउंटर को अपडेट करता हूं, तो मैं सरणी को अपडेट नहीं कर सकता। यहाँ मेरे पास अब तक क्या है।

import React from 'react'; 

function IngredientsCheckBoxes(props) {

    let newData = props.ingredients
    let newestArray = []
    let handleOnChange = (e) => {
        let isChecked = e.target.checked;
        if (isChecked) {
            for ( let i = 0; i <= newestArray.length; i++ ){
                if (e.target.value !== i) {
                    newestArray.push(e.target.value)
                    return newestArray
                }
            }
        } else if (isChecked === false) {
            newestArray = newestArray.filter(
                ingred => ingred !== e.target.value
            )
        }
    }

return ( 
    <div>
        <ul className="toppings-list">
            {newData.map(( name , index) => {
                return (
                    <li key={index}>
                        <div className="toppings-list-item">
                            <div className="left-section">
                                <input
                                    type="checkbox"
                                    id={`custom-checkbox-${index}`}
                                    name={name}
                                    value={name}
                                    onChange={e => handleOnChange(e)}
                                />
                     <label htmlFor={`custom-checkbox-${index}`}>{name}</label>
                                </div>
                            </div>
                        </li>
                    );
                })}
            </ul>
            <h1>{count goes here}</h1>
        </div>
    )
}

export default IngredientsCheckBoxes;

मैंने पहले एक यूजस्टेट हुक का इस्तेमाल किया था, लेकिन जहां भी मैं इसे हैंडलऑन चेंज फ़ंक्शन में डालता हूं, यह खत्म हो जाता है और सामग्री को सरणी में नहीं रखेगा।

मुझे लगता है कि उत्तर बहुत स्पष्ट है लेकिन थोड़ी देर के लिए कोड को देखने के बाद मैं बाहरी सहायता की तलाश में हूं, जिनमें से किसी की सराहना की जाएगी। पहले ही, आपका बहुत धन्यवाद।

1
mstaffer 26 जिंदा 2022, 20:21
काउंटर से आप क्या समझते हैं? जाँच की गई सामग्री की संख्या? क्योंकि आपने अपने कोड में काउंटर घोषित नहीं किया है।
 – 
Sarthak Malik
26 जिंदा 2022, 20:53
हां, कितनी सामग्री की जांच की गई है, नीचे एक {गिनती जाती है} है जिसे मैं समझ नहीं पाया। जब मैं सिर्फ {गिनती} करता हूं तो यह बाकी फ़ंक्शन को ओवरराइड करता है और सरणी को अपडेट करना बंद कर देता है।
 – 
mstaffer
26 जिंदा 2022, 20:56

2 जवाब

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

आपके घटक के अंदर क्या बदल रहा है इसका ट्रैक रखने के लिए आपको राज्य का उपयोग करना चाहिए।

भी,

  • आपको सरणी अनुक्रमणिका को key के रूप में उपयोग करने से बचना चाहिए
  • और सरणी के अंदर उनकी स्थिति पर भरोसा करने के बजाय अद्वितीय आईडी (name) द्वारा अपने आइटम को संबोधित करने से बेहतर होगा (जिसे लगातार बदला जा रहा है)
  • और गतिशील रूप से उत्पन्न id को छोड़ दें, क्योंकि विशिष्ट DOM नोड के संदर्भ में कभी भी इनका उपयोग न करने की संभावना काफी अधिक है
  • अपने UI को अधिक बारीक (पुन: प्रयोज्य) घटकों में तोड़ना आपके ऐप के लिए अच्छा होगा

आप जो (प्रतीत होता है) हासिल करने की कोशिश कर रहे हैं, उसका आसुत उदाहरण इस प्रकार दिख सकता है:

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const CheckListItem = ({onHit, label}) => {
  return (
    <label>
      <input type="checkbox" onChange={() => onHit(label)} />
      {label}
    </label>
  )
}

const CheckList = ({itemList}) => {
  const [selectedItems, setSelectedItems] = useState(
    itemList
      .reduce((acc, itemName) => 
        (acc[itemName] = false, acc), {})
  )
  const onCheckItem = itemName => 
    setSelectedItems({...selectedItems, [itemName]: !selectedItems[itemName]})
  const numberOfChosenItems = Object
    .values(selectedItems)
    .filter(Boolean)
    .length
  const listOfChosenItems = Object
    .keys(selectedItems)
    .filter(itemName => selectedItems[itemName] === true)
    .join(', ')
  

  return !!itemList.length && (
    <div>
      <ul>
        {
          itemList.map(itemName => (
            <li key={itemName}>
              <CheckListItem
                label={itemName}
                onHit={onCheckItem}
              />
            </li>
          ))
        }
      </ul>
      {
        !!numberOfChosenItems && (
          <div>
            Chosen items: {listOfChosenItems} (Total: {numberOfChosenItems})
          </div>
        )
      }
    </div>
  )
}

const ingredients = ['flour', 'eggs', 'milk', 'sugar']

const App = () => {
  return (
    <CheckList itemList={ingredients} />
  )
}

render (
  <App />,
  rootNode
)
li {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
1
Yevgen Gorbunkov 26 जिंदा 2022, 21:14
बहुत विस्तृत जवाब @Yegven
 – 
Sarthak Malik
26 जिंदा 2022, 21:17
मदद के लिए बहुत-बहुत धन्यवाद, मैं अभी भी एक कोड नौसिखिया हूं और स्वयं पढ़ाया जाता हूं, इसलिए किसी ऐसे व्यक्ति से जो कुछ भी इन चीजों को पहले कर चुका है, वह बहुत बड़ी मदद है, धन्यवाद!
 – 
mstaffer
26 जिंदा 2022, 22:03

IngredientsCheckBoxes घटक को फिर से प्रस्तुत करने और बाद में घटक दृश्य में परिवर्तन दिखाने के लिए नवीनतमअरे एक राज्य होना चाहिए।

const [selectedIngredients, setSelectedIngredients] = useState([]);

और फिर क्रमशः राज्य का उपयोग और अद्यतन करने के लिए selectedIngredients और setSelectedIngredients का उपयोग करें।

यह रहा एक codesandbox जिसमें वर्किंग कोड है।

सुनिश्चित करें कि आप राज्य के लिए उपयुक्त नामों का उपयोग करते हैं। selectedIngredients newestArray से बेहतर नाम है क्योंकि यह आपको बताता है कि इसका वास्तव में क्या मतलब है।

1
Sarthak Malik 26 जिंदा 2022, 21:11
यह भी काम किया, धन्यवाद!
 – 
mstaffer
26 जिंदा 2022, 22:03