Estoy tratando de pasar datos de NavBar.js a un componente secundario Mybooks.js que ya ha sido procesado por el enrutador React, luego obtengo una representación doble. El enrutamiento está ocurriendo en App.js.
NavBar.js
const AlreadyConnected = () => { return( <div> <MyBooks address={walletAddress}/> </div> ) } return( <div> {walletAddress ? AlreadyConnected() : null} </div> ) };MisLibros.js
import React, { useEffect } from 'react' const MyBooks = ({address}) => { console.log(address); const URL = `http://localhost:3001/api/tatumapi`; const chain = 'ETH'; const params = { address: address, chain: chain }; useEffect(() => { fetch(URL, { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(params) }) .then(response => response.json()) .then(data => console.log(data)); }, []) return(<div>TEST</div>) }Aplicaciones.js
import { NavBar } from './pages/NavBar'; import MyBooks from './pages/MyBooks'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; const App = () => { return ( <Router> <div> <NavBar /> <div> <Routes> <Route path='/' element={<MyBooks />} /> </Routes> </div> </div> </Router> ) } export default App;Producción:
TEST TEST¿Cómo pasar accesorios de NavBar.js a MyBooks.js sin renderizar el mismo componente dos veces?
Parece que lo que estás tratando de hacer es una representación condicional, tal vez deberías probar esto:
return( <div> {walletAddress && <MyBooks address={walletAddress}/> } </div> )Verifique sus archivos de código hasta index.js para esta línea contenedora de <React.StrictMode>. El modo de desarrollo predeterminado a veces puede contener esta línea y provoca una doble representación en el modo de desarrollo para permitir la identificación de errores.