मेरे पास फोन बुक (नाम, नाम, फोन) के लिए उपयोगकर्ता जानकारी वाली वस्तुओं की एक सरणी है। मैं उन्हें उस क्रम में प्रस्तुत करने में सक्षम नहीं हूं जो मैं चाहता हूं और उन्हें अंतिम नाम से क्रमबद्ध करने में सक्षम होना चाहता हूं। मैं यह कैसे कर सकता हूँ?

मैं उन्हें इस तरह की एक तालिका में प्रस्तुत करता हूं:

{persons.map((element, i) => (
   <tr key={i}>
      <td style={style.tableCell}>{ element.userFirstname }</td>
      <td style={style.tableCell}>{ element.userLastname }</td>
      <td style={style.tableCell}>{ element.userPhone }</td>
   </tr>
))}

सरणी में डेटा जोड़ने के लिए, मेरे पास एक ऐसा फॉर्म है जो सबमिट बटन दबाए जाने पर डेटा को सरणी में जोड़ता है। इस प्रकार मैं डेटा जोड़ता हूं:

const [persons, setPersons] = useState([
    { 
      userFirstname: "Coder", 
      userLastname: "Byte", 
      userPhone: "8885559999"
    }
  ])

  const [formData, setFormData] = useState({
    userFirstname: "",
    userLastname: "",
    userPhone: ""
  });

  const { userFirstname, userLastname, userPhone } = formData;

  const onChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }

  const onSubmit = (e) => {
    e.preventDefault();
    setPersons(persons.concat({ userFirstname: userFirstname, userLastname: userLastname, userPhone: userPhone }));
  }

क्या मुझे मानचित्र फ़ंक्शन से पहले सरणी को सॉर्ट करने की आवश्यकता है या क्या मैं इसे मानचित्र फ़ंक्शन के दौरान कर सकता हूं?

1
Dov Royal 12 जुलाई 2021, 17:55

2 जवाब

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

आप जहां चाहें, राज्य की स्थापना के दौरान या प्रतिपादन के दौरान कर सकते हैं।

मैं इसे मानचित्र में करने के साथ जाऊंगा यानी एक सरणी के रूप में प्रस्तुत करना, क्योंकि यह केवल डेटा की शफलिंग है। इस तरह मेरी मूल राज्य सूची 'अंतिम संशोधित' द्वारा आदेशित की जाती है, जो बाद में काम आ सकती है।

तो उन्हें अंतिम नाम से वर्णानुक्रम में क्रमबद्ध करने के लिए, आप sort विधि का उपयोग कर सकते हैं।

{persons.sort((a,b) => a.userLastname.localeCompare(b.userLastname))).map((element, i) => (
 <tr key={i}>
    <td style={style.tableCell}>{ element.userFirstname }</td>
    <td style={style.tableCell}>{ element.userLastname }</td>
    <td style={style.tableCell}>{ element.userPhone }</td>
 </tr>
))}
3
Badal Saibo 16 जुलाई 2021, 15:45

मेरा सुझाव है कि आप राज्य को स्थापित करने से पहले सरणी को सॉर्ट करें क्योंकि अन्यथा प्रत्येक रेंडर में इसे दिखाने से पहले इसे सॉर्ट करने का प्रयास किया जाएगा।

0
Tolga Berk Ordanuç 12 जुलाई 2021, 15:36