मेरे पास कस्टम हुक useFetch है जो इनपुट के रूप में URL लेता है और 3 डेटा देता है और मेरे पास उन डेटा को प्रदर्शित करने के लिए घटक CompanyListing है। मैं if else कथन का उपयोग करके उस हुक में URL के रूप में दो अलग-अलग मान भेजना चाहता हूं। यदि उपयोगकर्ता द्वारा कोई खोज नहीं की जाती है तो if endpoint से डेटा प्रदर्शित करें, और यदि उपयोगकर्ता कीवर्ड द्वारा खोज करता है, तो else endpoint से प्रदर्शित करें। यह वह कोड है जिसे मैंने लिखा था CompanyListing.js

const [counter, setCounter] = useState(1);
  let endpoint = `${CONSTANTS.BASE_URL}/companies?page=${counter}`;
  const searchCompanies = (searchTerm) => {
    if (searchTerm === '') {
      endpoint = `${CONSTANTS.BASE_URL}/companies?page=${counter}`;
      //console.log('DEFAULT ENDPOINT', endpoint);
    } else {
      endpoint = `${CONSTANTS.BASE_URL}/companies?search=${searchTerm}`;
      //console.log('SEARCH ENDPOINT', endpoint);
    }
  };
  //console.log('USEFETCH ENDPOINT', endpoint);
  const [companies, isLoading, meta] = useFetch(endpoint);
  return (
    <>
      <div data-testid="search-box">
        <SearchCompany callback={searchCompanies} />
      </div>
      {!isLoading ? (
        <div className="container">
          <div className="row" data-testid="company-list">
            {companies.length !== 0 && companies
              ? companies.map((company) => <CompanyLists key={company.id} {...company} data-testid="company-list" />)
              : 'No companies'}
          </div>
          <Pagination meta={meta} counter={counter} setCounter={setCounter} data-testid="paginate" />
        </div>
      ) : (
        <Spinner />
      )}
    </>
  );
};
export default CompanyListing;

जब मैंने useFetch को if else के अंदर कॉल करने का प्रयास किया, तो यह हुक के नियमों के विरुद्ध जाता है और जब मैंने उपरोक्त कोड में ऐसा करने का प्रयास किया, तो मैं खोज समापन बिंदु को useFetch पर पास नहीं कर सकता। कोई विचार मैं इसे कैसे ठीक कर सकता हूं? मैंने एक ही घटक पर सभी लाने की कोशिश की और यह पूरी तरह से काम करता है लेकिन पहले से ही कस्टम हुक है, मैं फिर से कोड दोहराना नहीं चाहता हूं। और कोई विचार क्यों मुझे एक ही चीज़ के लिए 5 कंसोल मिल रहे हैं? मदद की बहुत सराहना की जाएगी।

1
Bishwas 15 जून 2020, 06:13

1 उत्तर

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

मुझे लगता है कि समस्या यह है कि, जब searchCompanies को कॉल किया जाता है, तो आपके मूल घटक को फिर से प्रस्तुत नहीं किया जा रहा है, इसलिए परिणाम useFetch को कॉल नहीं किया जाएगा, और साथ ही आप इसे अन्य के अंदर भी उपयोग नहीं कर सकते हैं ,

तो, मुझे लगता है कि आप ऐसा कुछ कर सकते हैं, राज्य में एंडपॉइंट बनाए रख सकते हैं और जब भी searchCompanies को कॉल किया जा रहा है तो इसे बदल सकते हैं, इस तरह आपके घटक को फिर से प्रस्तुत किया जाएगा और आपको नवीनतम एंडपॉइंट मिलेगा।

const [counter, setCounter] = useState(1);
const [endpoint,setEndPoint] = useState(`${CONSTANTS.BASE_URL}/companies?page=${counter}`);

const searchCompanies = (searchTerm) => {
  if (searchTerm === '') {
    setEndPoint(`${CONSTANTS.BASE_URL}/companies?page=${counter}`);
  } else {
    setEndPoint(`${CONSTANTS.BASE_URL}/companies?search=${searchTerm}`);
  }
};

//console.log('USEFETCH ENDPOINT', endpoint);
const [companies, isLoading, meta] = useFetch(endpoint);
1
Vivek Doshi 15 जून 2020, 05:25