0
378
Viewsel operador ternario no se golpea, después de hacer clic en el botón y volver al componente anterior
He estado tratando de entender por qué mi operador ternario no se ve afectado cuando configuro isOpen en verdadero.
Tengo esto en mi componente .
{isOpen ? ( <div> <div className="mt-6 flex flex-col"> <button className="mb-1 rounded bg-blue-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-blue-700"> <span className="text-center">edit</span> </button> <button className="rounded bg-red-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-red-700" onClick={deleteContact} > <span className="text-center tracking-wide">Bye!</span> </button> </div> </div> ) : ( <div> <div className="mt-6 flex flex-col"> <button className="mb-1 rounded bg-blue-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-blue-700"> <span className="text-center">edit</span> </button> <button className="rounded bg-red-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-red-700" onClick={() => setIsOpen(true)} > <span className="text-center tracking-wide">delete</span> </button> </div> </div> )}Cuando hago clic en el siguiente botón:
<button className="rounded bg-red-500 px-4 py-3 capitalize text-white duration-100 ease-in-out hover:bg-red-700" onClick={() => setIsOpen(true)} > <span className="text-center tracking-wide">delete</span> </button> Parece que el operador ternario no se activa o tal vez isOpen no se establece en verdadero.
Es este botón de eliminar aquí:
Pero al hacer clic en <ShowContact /> simplemente se elimina del árbol en lugar de presionar el ternario.
El repositorio completo está aquí si desea replicar https://github.com/mrpbennett/contact_fastapi/tree/react-fe
3 answers
Answer question0
He resuelto esto moviendo mi controlador de clics ... como
La acción de alternar (setShowContact) del contacto detallado está vinculada a la etiqueta div (contenedor de información de contacto completa).
{contacts.map((contact) => ( <div key={contact.id}> {showContact === contact.id ? ( <ShowContact contactId={contact.id} open={true} /> ) : ( <div className="border-b border-gray-200 p-4 py-2 text-left capitalize text-gray-700 hover:bg-gray-200" onClick={() => setShowContact((show) => show === contact.id ? null : contact.id ) } > <span className="font-bold">{contact.first_name}</span>{' '} {contact.last_name} </div> )} </div> ))}0
Creo que necesitas deshacerte de la línea 14 window.location.reload(true); en su componente "ShowContact". Eso está causando que toda su aplicación se vuelva a cargar, lo que luego reinicia el estado "isOpen" para que sea falso nuevamente.
0
Parece que el componente principal está volviendo a crear una instancia del componente secundario ShowContact . El padre debe memorizar todo lo que representa ShowContact para evitar que se vuelva a crear desde cero, lo que hace que isOpen se inicialice como falso.
Hay muchas formas en que puede ocurrir, como asignar el resultado de renderizado a una variable e insertarlo en el JSX:
const showContactRender = ( <ShowContact ... /> ); return ( <div> ... {showContactRender} ... </div> ); En el ejemplo anterior, cada vez que se activa una nueva representación en el padre, se recrea el componente almacenado en showContactRender. useMemo evita recrearlo si sus entradas no cambian. Sin embargo, una mejor manera sería evitar eso si es posible e insertar <ShowContact> directamente en el JSX de retorno.
Tenga en cuenta que el problema descrito anteriormente puede no estar en el padre directo, sino en el padre del padre o cualquier componente por encima de él. Establezca puntos de interrupción en todas partes para ver con qué frecuencia se vuelve a renderizar.