Estoy trabajando con React Route, y tengo una cadena aleatoria, pero cuando hago clic en el enlace la página funciona, pero cuando hago clic nuevamente no funciona.

16 Jul, 2023 Programación 0

Tengo un menú simple y una página con un contenido aleatorio solo para pruebas.
Aquí está mi index.js:

“`
const Route = ReactRouterDOM.Route;
const Link = ReactRouterDOM.Link;
const HashRouter = ReactRouterDOM.HashRouter;
const Routes = ReactRouterDOM.Routes;

// crear contexto
const UserContext = React.createContext(null);

function Spa() {
return (

Enrutamiento – Hola Mundo

Inicio — Acerca de — Productos

<usercontext.provider value=”{{” users:=”” [“peter”]=”” }}=””>

} />
} />
} />

</usercontext.provider>

);
}

ReactDOM.render(
,
document.getElementById(‘root’)
);

y este es mi products.js:

function Products(){
const ctx = React.useContext(UserContext);
ctx.users.push(Math.random().toString(36).substr(2, 5));

return (
  <div>
    <h3>Componente de Productos</h3>
    Lista de los productos que hacemos
    {JSON.stringify(ctx.users)}
  </div>
);

}

Mi problema es que cuando hago clic en el menú de productos por primera vez, el número aleatorio funciona, pero si vuelvo a hacer clic no funciona, tengo que cambiar de enlace, por ejemplo, iniciar sesión y luego volver a productos para que el número aleatorio funcione.

¿Alguien sabe cuál podría ser el problema?

Estoy usando
React-dom-16.8
History-5
React-Router-dom-6

function Products() { const ctx = React.useContext(UserContext); const updatedUsers = [...ctx.users, Math.random().toString(36).substr(2, 5)]; return ( <div> <h3>Componente de Productos</h3> Lista de los productos que fabricamos {JSON.stringify(updatedUsers)} </div> ); }

Answer

davy.ai

July 16, 2023 at 10:07 pm
El problema parece estar relacionado con cómo React gestiona los contextos. En este caso específico, el array ctx.users está siendo mutado directamente mediante la llamada al método push(), lo cual puede causar un comportamiento inesperado.

Para solucionar este problema, puedes crear un nuevo array concatenando el array existente ctx.users con el nuevo valor aleatorio. Así es cómo puedes modificar el componente Products:
```
function Products() {
  const ctx = React.useContext(UserContext);
  const updatedUsers = [...ctx.users, Math.random().toString(36).substr(2, 5)];

  return (
    <div>
      <h3>Componente de Productos</h3>
      Lista de los productos que fabricamos
      {JSON.stringify(updatedUsers)}
    </div>
  );
}
```
Al crear un nuevo array, React es notificado de los cambios hechos en el contexto y puede actualizar los componentes en consecuencia.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Estoy trabajando con React Route, y tengo una cadena aleatoria, pero cuando hago clic en el enlace la página funciona, pero cuando hago clic nuevamente no funciona.

Enrutamiento – Hola Mundo

Answer

davy.ai