मेरे पास एक घटक है जिसे मैं तब प्रस्तुत करता हूं जब कोई चेतावनी राज्य से खींची जाती है। वर्तमान में अलर्ट प्रेषण और प्रदर्शित करता है लेकिन मुझे निम्न त्रुटि मिल रही है और मुझे यकीन नहीं है कि मैं इस घटक का अनुपालन करने के लिए फिर से कैसे काम करूंगा।
त्रुटि: Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate.
const Alerts = ({ alerts }) =>
alerts !== null &&
alerts.length > 0 &&
alerts.map((alert) =>
notification[`${alert.type}`]({
key: `${alert.id}`,
message: `${alert.title}`,
description: `${alert.message}`,
})
);
2 जवाब
वास्तव में रेंडर फंक्शन शुद्ध और बिना साइड-इफेक्ट्स के होना चाहिए। याद रखें, एक कार्यात्मक घटक का संपूर्ण फ़ंक्शन बॉडी है रेंडर फ़ंक्शन। दुष्प्रभाव जारी करने के लिए useEffect हुक का उपयोग करें।
साथ ही, array::map का उपयोग करने के बजाय, array::forEach का उपयोग करें क्योंकि यह किसी सरणी पर साइड-इफेक्ट जारी करने के लिए इच्छित सरणी फ़ंक्शन है।
फ़ंक्शन से स्पष्ट रूप से null वापस आना याद रखें, यह इंगित करने के लिए कि प्रतिक्रिया देने के लिए कुछ भी नहीं है।
const Alerts = ({ alerts }) => {
useEffect(() => {
if (alerts) {
alerts.forEach(alert => {
notification[alert.type]({
key: alert.id,
message: alert.title,
description: alert.message,
})
})
}
}, [alerts]);
return null;
};
मुझे लगता है कि आप इस तरह से ReactElement की एक सरणी वापस करने में सक्षम नहीं हैं, इसे आजमाएं:
const Alerts = ({ alerts }) => {
if(alerts !== null &&
alerts.length > 0) {
return
(<>
{alerts.map(({type, id, title, message}) =>
notification[type]({
key: `${id}`,
message: `${title}`,
description: `${message}`,
})}
</>)} else { return null }
});
संबंधित सवाल
नए सवाल
reactjs
प्रतिक्रिया उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए एक जावास्क्रिप्ट पुस्तकालय है। यह एक घोषणात्मक, घटक-आधारित प्रतिमान का उपयोग करता है और इसका उद्देश्य कुशल और लचीला दोनों है।