असल में, फायरबेस में एक छवि अपलोड करने से पहले, मैं इनपुट को नियंत्रित करने की कोशिश कर रहा हूं:

export const controlThumbnail = (selectedThumbnail, setThumbnailError) => {
  if (!selectedThumbnail) {
    setThumbnailError('Please select a thumbnail!');

    return;
  }

  if (!selectedThumbnail.type.includes('image')) {
    setThumbnailError('Please select an image!');

    return;
  }

  if (selectedThumbnail.size > 1000000) {
    setThumbnailError('Image size must be less than 1MB!');

    return;
  }

  setThumbnailError(null);
};

जिसे मैं उपरोक्त विधि को /lib/controlThumbnail.js से कॉल करता हूं:

import { controlThumbnail } from '../../lib/controlThumbnail';
    
const Signup = () => {
  const [userInfo, setUserInfo] = useState({
    name: '',
    email: '',
    password: '',
    thumbnail: null
  });
  const [thumbnailError, setThumbnailError] = useState(null);


  const userInputHandler = (e) => {
    setUserInfo((prevUserInfo) => {
      if (e.target.name === 'thumbnail') {
        const thumbnail = e.target.files[0];
        controlThumbnail(thumbnail, setThumbnailError);

        return { ...prevUserInfo, thumbnail };
      } else {
        return { ...prevUserInfo, [e.target.name]: e.target.value };
      }
    });
  };
...

तो, यह अब सही ढंग से काम कर रहा है, लेकिन मुझे आश्चर्य है कि क्या यह करने का यह अच्छा तरीका है? या क्या मुझे नियंत्रण विधि को घटक के अंदर रखना चाहिए और सेटस्टेट को पैरामीटर के रूप में कभी नहीं देना चाहिए?

0
imaskingbruh 25 पद 2021, 03:54
क्यों न केवल controlThumbnail() से त्रुटि संदेश लौटाएं, फिर उसे स्थिति में सेट करें? यदि यह केवल एक त्रुटि संदेश उत्पन्न कर रहा है, तो इसे 'नियंत्रण थंबनेल' नाम क्यों दिया गया है? मैं इसे राज्य की स्थापना की जिम्मेदारी पारित करने की आवश्यकता नहीं देखता। मैं यह भी नहीं जानता कि आप else ifs का उपयोग क्यों नहीं कर रहे हैं।
 – 
Vektor
25 पद 2021, 04:08
अरे हाँ, मैंने वही किया जो आपने कहा था और इसे केवल तभी लौटाया जब 'if's मैचों में से एक, या वापसी शून्य हो। अब मैं राज्य की स्थापना की जिम्मेदारी नहीं लेता, जो मुझे परेशान कर रहा था। उह, क्या इसका नाम चेक थंबनेल या कुछ और होना चाहिए? मैं अन्य ifs का उपयोग नहीं करता क्योंकि मुझे लगता है कि मामले (यदि यह मौजूद है, आकार और प्रकार) एक-दूसरे के लिए प्रासंगिक नहीं हैं, मेरा मतलब है कि अगर मुझे पीडीएफ के प्रकार की जांच करने की भी आवश्यकता है, तो मैं दूसरे को जोड़ता हूं ... क्या यह गलत है?
 – 
imaskingbruh
25 पद 2021, 04:36
सैद्धांतिक रूप से कहें तो, else if काम कर सकता है, लेकिन इस संदर्भ में यह आवश्यक नहीं है।
 – 
Vektor
25 पद 2021, 05:11

1 उत्तर

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

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

आप एक शुद्ध सत्यापन फ़ंक्शन बना सकते हैं, और अपने Signup घटक में स्थिति को अपडेट करने के लिए बस इसके रिटर्न का उपयोग करें:

const validateThumbnail = (thumbnail) => {
  if (!thumbnail) {
    return 'Please select a thumbnail!';
  }

  if (!thumbnail.type.includes('image')) {
    return 'Please select an image!'
  }

  if (thumbnail.size > 1000000) {
    return 'Image size must be less than 1MB!'
  }

  return null
}

const Signup = () => {
  const [userInfo, setUserInfo] = useState({
    name: '',
    email: '',
    password: '',
    thumbnail: null
  });
  const [thumbnailError, setThumbnailError] = useState(null);


  const userInputHandler = (e) => {
    setUserInfo((prevUserInfo) => {
      if (e.target.name === 'thumbnail') {
        const thumbnail = e.target.files[0];
        setThumbnailError(validateThumbnail(thumbnail));
        return { ...prevUserInfo, thumbnail };
      }
      return { ...prevUserInfo, [e.target.name]: e.target.value };
    });
  }
}
4
Oli 25 पद 2021, 04:40
हां, मैंने ठीक यही किया है, आपकी पोस्ट के लिए धन्यवाद, क्या इस सत्यापन कार्य के लिए कुछ lib फ़ाइल में रहना ठीक है या इसे सादगी के लिए घटक में रखना ठीक है?
 – 
imaskingbruh
25 पद 2021, 04:57
मेरे अंगूठे का नियम अमूर्त है जब मुझे दो बार से अधिक पुन: उपयोग करने की आवश्यकता होती है।
 – 
Vektor
25 पद 2021, 05:08