Tengo una página principal, tiene los findUser() e inputValue , quiero hacer un encabezado de aplicación estático, pero tiene una input that requiere findUser() e inputValue para usarla, ¿cómo puedo pasarlos correctamente (esto puede hacerse sin Redux?)
Pagina principal:
const githubPageref = useRef(1); const reposRef = useRef([]); const [userNickName, setUserNickName] = useState(''); const [userProfile, setUserProfile] = useState(''); const [repos, setRepos] = useState([]); const [inputValue, setinputValue] = useState(''); const [reposCount, setReposCount] = useState(0); const [page, setPage] = useState(1); const [currentRepos, setCurrentRepos] = useState([]); const pageSize = 4; const [loading, setLoading] = useState(false); const navigate = useNavigate(); const findUser = async () => { setLoading(true); setUserNickName(inputValue); const reposUrl = `${usersUrl + inputValue}/repos?page=${githubPageref.current}`; const profileUrl = usersUrl + inputValue; await getApiResource(reposUrl) .then((data) => { if (!data) { navigate('UserNotFoundPage'); } setRepos([...data, ...repos]); reposRef.current = ([...repos, ...data]); }); await getApiResource(profileUrl) .then((data) => { setUserProfile(data); setLoading(false); }); };aplicación:
const App = ({ findUser, setinputValue }) => { return ( <> <Header findUser={findUser} setinputValue={setinputValue} /> <Routes> <Route path="/" element={<MainPage />} /> <Route path="a" element={<StartSearchingPage />} /> <Route path="UserNotFoundPage" element={<UserNotFoundPage />} /> </Routes> </> ); };Puede usar la API de contexto de React como alternativa a Redux. O simplemente, puede definir lo que se necesita en MainPage.js y Header.js en App.js y transmitirlos. Como ejemplo de esta manera:
const App = ({ findUser, setinputValue }) => { const githubPageref = useRef(1); const reposRef = useRef([]); const [userNickName, setUserNickName] = useState(''); const [userProfile, setUserProfile] = useState(''); const [repos, setRepos] = useState([]); const [inputValue, setinputValue] = useState(''); const [reposCount, setReposCount] = useState(0); const [page, setPage] = useState(1); const [currentRepos, setCurrentRepos] = useState([]); const pageSize = 4; const [loading, setLoading] = useState(false); const navigate = useNavigate(); const findUser = async () => { setLoading(true); setUserNickName(inputValue); const reposUrl = `${usersUrl + inputValue}/repos?page=${githubPageref.current}`; const profileUrl = usersUrl + inputValue; await getApiResource(reposUrl) .then((data) => { if (!data) { navigate('UserNotFoundPage'); } setRepos([...data, ...repos]); reposRef.current = ([...repos, ...data]); }); await getApiResource(profileUrl) .then((data) => { setUserProfile(data); setLoading(false); }); }; return ( <> <Header findUser={findUser} setinputValue={setinputValue} /> <Routes> <Route path="/" element={<MainPage />} /> <Route path="a" element={<StartSearchingPage />} /> <Route path="UserNotFoundPage" element={<UserNotFoundPage />} /> </Routes> </> ); };