मैं संदेशों की एक सूची बनाने और इसे अपडेट करने की कोशिश कर रहा हूं क्योंकि मैं और जोड़ता हूं, मुझे लगता है कि मुझे कुछ याद आ रहा है लेकिन यह नहीं बता सकता कि यह क्या है।

ऐप में 2 घटक हैं - संदेश और SendMessage, संदेश संदेश घटक की एक सरणी पर मैपिंग कर रहा है। सेनमैसेज में एक फॉर्म है जो संदेश स्थिति में सरणी स्टोर को अपडेट करेगा।

किसी भी सहायता के लिए अग्रिम धन्यवाद।

ऐप.जेएस

function App() {
const [messages, setMessages] = useState([{name: 'ken', 'message': "hayyy"},{name: 'kendra', 'message': "hayyy"}])

const handleSend = (message) => {
    const newMessages = [...messages];
    newMessages.push(message);
    setMessages(newMessages);
    console.log(message)
  }

return (
<div className="App">
<Messages messages={messages} />
<SendMessage onSend={handleSend}/>
</div>
  );
}
export default App;

Messages.js

const Messages = (props) => {
const messages = props.messages.map((message, index) => {
    return (
        <Message 
            key={index}
            name={message.name}
            message={message.message}
        />
    )})
return (
    <div>
    {messages}
    </div>
)}
export default Messages;

Message.js

const Message = (props) => {
    return (
        <div className="Message">
          <p className="message">{props.message}</p>
          <p className="name">{props.name}</p>
        </div>
    )}

export default Message;

SendMessage.js

const SendMessage = (props) => {
    const [inputMessage, setInputMessage] = useState('')
    const handleSubmit = (event) => {
        event.preventDefault();
        props.onSend(inputMessage);
        setInputMessage('')
    }
    const handleChange = (event) => {
        setInputMessage(event.target.value)
    }

    return (
        <div className="SendMessage">
          <form onSubmit={handleSubmit}>
            <input 
                type="text" 
                placeholder="enter message" 
                value={inputMessage}
                onChange={handleChange}
            />
            <button>Send</button>
          </form>
        </div>
    )}
export default SendMessage;
0
Ken Ryan 31 मार्च 2021, 08:08
मामला क्या है? क्या अपेक्षा के अनुरूप काम नहीं कर रहा है?
 – 
Drew Reese
31 मार्च 2021, 08:12
जब मैं भेजें बटन पर क्लिक करता हूं तो नया संदेश सरणी में दिखाई देता है लेकिन यह खाली दिखाई देता है।
 – 
Ken Ryan
31 मार्च 2021, 08:13
आपका क्या मतलब है "सरणी में दिखाई देता है लेकिन यह खाली दिखाई देता है"?
 – 
Drew Reese
31 मार्च 2021, 08:14
ऐसा लगता है कि जब आप handleSend को कॉल कर रहे हों तो आप कोई message नहीं भेज रहे हैं
 – 
need_to_know_now
31 मार्च 2021, 08:14
5
आह, मैं अब देखता हूं, inputMessage और message तार हैं, लेकिन आप name और message गुणों के साथ संदेश वस्तुओं को प्रस्तुत करने की उम्मीद कर रहे हैं।
 – 
Drew Reese
31 मार्च 2021, 08:17

1 उत्तर

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

मुख्य मुद्दा जो मैं यहां देख रहा हूं वह यह है कि SendMessage घटक में, आप राज्य को एक स्ट्रिंग में सहेज रहे हैं और एक handleSend फ़ंक्शन को भेजने का प्रयास कर रहे हैं जो किसी ऑब्जेक्ट की अपेक्षा करता है जैसे कि name और message

इस प्रकार आप अपने handleSend फ़ंक्शन को इस प्रकार अपडेट कर सकते हैं:

const handleSend = (message) => {
    const formattedMsg = { name: 'Some Name', message };
    const newMessages = [...messages, formattedMsg];
    setMessages(newMessages);
}

साथ ही एक सामान्य अभ्यास के रूप में वैकल्पिक श्रृखंला का उपयोग करें जब भी आप वस्तुओं से नेस्टेड कुंजियों का उपयोग करने का प्रयास कर रहे हों। यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे थे, तो यह समस्या पहली जगह में नहीं होगी क्योंकि शायद आप विशिष्ट प्रकार के साथ तर्कों को एनोटेट करेंगे। लेकिन यहां हम कम से कम एक वैकल्पिक श्रृंखला (? ऑपरेटर का उपयोग करके) प्रदान कर सकते हैं और उस मामले को संभाल सकते हैं जहां कोई संदेश मौजूद नहीं है।

const messages = props.messages.map((message, index) => (
        <Message 
            key={index}
            name={message?.name}
            message={message?.message}
        />
));

if (!messages) {
 return (
   <p>No messages...</p>
 )
}

[संपादित करें] अब मैं देखता हूं कि @DrewReese ने इसी तरह के उत्तर पर टिप्पणी की है। पोस्ट करने से पहले इसे नहीं देखा।

0
Yedhin 31 मार्च 2021, 08:26