es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Actualizando dos estados en paralelo sin utilizar useReducer.

27 Jul, 2023 Programación

En este código, cuando hago clic en el botón de eliminar, obtengo este error:

App.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Me di cuenta de que la razón es que debo actualizar el estado de selectedNumber antes de actualizar el estado de numbers. Entiendo que es imposible hacerlo solo con useState. Me di cuenta de que podría hacerlo con useReducer. ¿Estoy en lo correcto o hay otra forma de hacerlo sin usar useReducer?

import { useState } from "react";

const App = () => {
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5, 6]);
  const [selectedNumber, setSelectedNumber] = useState(1);

  return (
    <div>
      <ul>
        {numbers.map((number) => {
          return (
            <li key="{number}" onclick="{()" ==""> setSelectedNumber(number)}
              style={
                number === selectedNumber ? { color: "blue" } : { color: "red" }
              }
            >
              {number}
            </li>
          );
        })}
      </ul>
      <div>
        {selectedNumber}
        <button onclick="{()" =="">
            setNumbers((prev) =>
              prev.filter((number) => number !== selectedNumber)
            )
          }
        >
          delete
        </button>
      </div>
    </div>
  );
};

export default App;
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, tienes razón. El problema es que estás intentando actualizar el estado de numbers antes de actualizar el estado de selectedNumber, lo que hace que la función map intente acceder a un valor indefinido.

    Una solución sería usar useReducer para gestionar el estado en lugar de useState. Esto te permitiría actualizar ambos estados en una única acción.

    Otra solución sería almacenar el array filtrado de numbers en una variable separada antes de establecer el estado. Aquí tienes un ejemplo de cómo podrías modificar el código para usar esta solución:

    import { useState } from "react";

const App = () => {
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5, 6]);
  const [selectedNumber, setSelectedNumber] = useState(1);

  const handleDeleteButton = () => {
    const filteredNumbers = numbers.filter((number) => number !== selectedNumber);
    setNumbers(filteredNumbers);
  };

  return (
    <div>
      <ul>
        {numbers.map((number) => {
          return (
            <li key="{number}" onclick="{()" ==""> setSelectedNumber(number)}
              style={number === selectedNumber ? { color: "blue" } : { color: "red" }}
            >
              {number}
            </li>
          );
        })}
      </ul>
      <div>
        {selectedNumber}
        <button onclick="{handleDeleteButton}">eliminar</button>
      </div>
    </div>
  );
};

export default App;

    En este código modificado, la función handleDeleteButton se utiliza para filtrar el array numbers y establecer el array filtrado como estado mediante setNumbers.

Comments are closed.