मैं डेटा की एक सूची पुनर्प्राप्त कर रहा हूं और todos की सूची से एक शीर्षक नाम खोज रहा हूं, फिर मैं स्विच मटेरियल UI एक घटक के साथ बनाया है जो पूर्ण हो चुके और नहीं किए गए कार्य को टॉगल करने के लिए है।

आप पूरा डेमो यहां देख सकते हैं => https: //codesandbox.io/s/so-68247206-forked-sx9kv?file=/src/App.js

अब मैं उन कार्य/कार्यों की सूची में todos शीर्षक खोजना चाहता हूं जो पूर्ण हो चुके हैं या पूर्ण नहीं हुए हैं, यह इस बात पर निर्भर करता है कि आप कहां स्विच करते हैं, फिलहाल खोज सभी todos में होती है।

मामले को पुन: पेश करने के लिए

  • ऐप को codesandbox में लॉन्च करें
  • टॉगल स्विच करें
  • तत्वों की खोज करें (यह सभी कार्य सूची में खोज करता है न कि पूर्ण या पूर्ण परिणाम सूची के माध्यम से नहीं)

प्रासंगिक कोड निम्नलिखित है

खोज विधि

  const handleSearch = (event) => {
    let value = event.target.value.toLowerCase();
    let result = [];
    result = tasks.filter((data) => {
      return data.title.search(value) !== -1;
    });
    setFilteredData(result);
  };

पूरी विधि

  const getCompleted = (e, value) => {
    let result = [];
    let switchValue = e.target.checked;
    result = tasks.filter(({ completed }) => completed === switchValue);
    setFilteredData(result);
    setIsCompleted(!switchValue);
    setText(isCompleted ? "Yes" : "No");
  };

पूर्ण किए गए और पूर्ण नहीं किए गए कार्यों को देखने के लिए मैं अपनी खोज पद्धति को कैसे बदल सकता हूं?

0
Koala7 5 जुलाई 2021, 19:25

3 जवाब

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

आपको राज्य में खोज मूल्य और स्विच मान दोनों को सहेजना होगा और मानों को फ़िल्टर करने के लिए उपयोग प्रभाव का उपयोग करना होगा। अपने कोड के नीचे दिए गए कांटे की जाँच करें

https://codesandbox.io/s/so-68247206-forked-nkuf3?file=/src/App.js

0
Anish Antony 5 जुलाई 2021, 16:47

handleSearch में आपका फ़िल्टर मूल कार्य सरणी से खोज करता है जो शायद वह नहीं है जो आप चाहते हैं:

   const handleSearch = (event) => {
    let value = event.target.value.toLowerCase();
    let result = tasks; //Assigning initial value to result
    if(isCompleted){
     result =  result.filter(({ completed }) => completed === isCompleted)
    } //only if isCompleted is true, filter the array first
    result = result.filter((data) => {
      return data.title.search(value) !== -1;
    }); //Filter the array based on search term
    setFilteredData(result);
  };

साथ ही, आपका getCompleted चेकबॉक्स का उलटा मान (!switchValue) के साथ सेट कर रहा है। आप इसे अतिरिक्त परम value के साथ बदल सकते हैं, जिसका आपके onChange कॉल में कोई हिसाब नहीं है।

 const getCompleted = (e) => {
    
    let switchValue = e.target.checked;
    let result = tasks.filter(({ completed }) => completed === switchValue);
    setFilteredData(result);
    setIsCompleted(switchValue);
    setText(switchValue ? "Yes" : "No"); //Is text state variable really required?
  };

यहां मैंने इसे ठीक करने का प्रयास किया है: CodeSandbox

ऐसा कहा जा रहा है, मैं अनुशंसा करता हूं कि कई राज्य चर न हों जो एक दूसरे से प्राप्त किए जा सकें। आपका text स्टेट वेरिएबल केवल देखने के उद्देश्य से उपयोग किया जाता है और इसका मान पूरी तरह से isCompleted पर निर्भर करता है। आप एक नए राज्य चर के बजाय "हां/नहीं" दिखाने के लिए अपने रिटर्न फ़ंक्शन में एक सशर्त ऑपरेटर का उपयोग कर सकते थे।

1
Tushar Shahi 5 जुलाई 2021, 16:48

आपके handleSearch तरीके में थोड़ा सा बदलाव किया गया है। जब आप अपना tasks फ़िल्टर कर रहे हों, तो आप isCompleted स्थिति का उपयोग करके जांच सकते हैं कि आपने पूर्ण स्विच पर टॉगल किया है या नहीं। आपको बस अपनी filter पद्धति के अंदर एक अतिरिक्त शर्त की आवश्यकता है जो पूर्ण हो चुके परिदृश्य का ध्यान रखती है। निम्नलिखित अद्यतन handleSearch विधि ठीक काम करती है।

  const handleSearch = (event) => {
    let value = event.target.value.toLowerCase();
    let result = [];
    console.log(value);
    let filterCompleted = false;
    if (!isCompleted) filterCompleted = true;
    console.log({ filterCompleted });
    result = tasks.filter((data) => {
      if (filterCompleted)
        return data.completed && data.title.search(value) !== -1;
      else return !data.completed && data.title.search(value) !== -1;
    });
    setFilteredData(result);
  };

मैं handleSearch के अंदर एक स्थानीय चर का उपयोग यह जांचने के लिए करता हूं कि क्या आपने पूर्ण बटन पर टॉगल किया है। यदि इसे चालू किया जाता है, तो फ़िल्टर करते समय मैं केवल उन कार्यों को फ़िल्टर करता हूं जिनमें completed संपत्ति true पर सेट है और इसके विपरीत। आप देख सकते हैं कि यह यहां काम करता है https:// codesandbox.io/s/so-68247206-forked-4iz7p?file=/src/App.js

नोट: मुझे लगता है कि isCompleted स्थिति विपरीत तर्क पर काम कर रही है। जब मैं स्विच को चालू करता हूं, तो isCompleted false होता है, लेकिन इसके बजाय यह true होना चाहिए। आप इसे ठीक करने या राज्य का नाम बदलने का प्रयास कर सकते हैं (यदि उल्टा तर्क जानबूझकर किया गया था और आपने केवल राज्य के नामकरण में गड़बड़ी की थी)। किसी भी तरह यह समाधान को प्रभावित नहीं करता है लेकिन डीबग करना मुश्किल बनाता है और कुछ भ्रम जोड़ता है।

1
Siddhant Varma 5 जुलाई 2021, 16:48