Saya mempunyai beberapa komponen yang dijadualkan berulang kali di dalamnya. Saya ingin menggunakan fungsi pembantu untuk mengimport dan menggunakan dalam berbilang komponen. Yang mengejutkan, ia tidak mudah-sekurang-kurangnya untuk saya. Baca banyak tentang perkara ini tetapi tidak dapat mengaitkannya.
Masalah yang saya hadapi ialah react-dom.development.js:16227 Ralat Tidak Ditangkap: Panggilan cangkuk tidak sah. Cangkuk hanya boleh dipanggil di dalam badan komponen berfungsi. Ini mungkin berlaku untuk salah satu daripada sebab berikut: Anda mungkin melanggar peraturan Hooks
Jadi bagaimana untuk memanggil penjadualan dalam fungsi pembantu? Saya fikir cangkuk tersuai mungkin cara untuk pergi - akan melihatnya sekarang.
Contoh komponen diperkemas:
...imports... import { helperCall } from '../../assets/helperFunctions/helperCall'; export default function CompExamp() { ...variables... return ( <div className="min-w-0 flex-1" onClick={(e) => helperCall(e, searchText, searchType)} > <span className="absolute inset-0" aria-hidden="true" /> <p className="text-sm font-medium text-black">Target</p> <p className="text-base text-gray-700">test</p> </div> ) }
Fungsi tambahan yang dipermudahkan:
import React from 'react'; import { useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { loadASearchResults, updateASearchTerm } from '../../redux/actionsReducers/AResults'; import { loadBSearchResults, updateBSearchTerm } from '../../redux/actionsReducers/BResults'; import { loadCSearchResults, updateCSearchTerm } from '../../redux/actionsReducers/CResults'; export function helperCall(e: any, searchText: string, searchType: string) { const dispatch = useDispatch(); const navigate = useNavigate(); e.preventDefault(); e.stopPropagation(); if (!searchText || searchText === '-' || searchText.toLowerCase() === 'not listed') { return; } if (searchType === 'a') { dispatch(updateASearchTerm({ searchTerm, searchType })); dispatch(loadASearchResults({ searchTerm, searchType })); navigate('/page-a'); } else if (searchType === 'b') { dispatch(updateBSearchTerm({ searchTerm, searchType })); dispatch(loadBSearchResults({ searchTerm, searchType })); navigate('/page-b'); } else if (searchType === 'c') { dispatch(updateCSearchTerm({ searchTerm, searchType })); dispatch(loadCSearchResults({ searchTerm, searchType })); navigate('/page-c'); } }
Anda hanya boleh menggunakan cangkuk React dalam komponen berfungsi React, tetapi anda boleh menghantar fungsi kepada fungsi pembantu seperti ini: