En este código, cuando hago clic en el botón Eliminar, aparece este error:
App.js: 9 TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'mapa')
Me di cuenta de que el motivo es que debo actualizar el estado del número seleccionado antes de actualizar el estado de los números. Entiendo que es imposible hacerlo solo con useState. Me di cuenta de que podía hacerlo con useReducer. ¿Tengo razón o hay otra forma de hacerlo sin 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;No está devolviendo nada en la devolución de llamada pasada a setNumbers . Por lo tanto, se devolverá undefined y el nuevo estado se vuelve undefined , lo que lleva a undefined.map(...
<button onClick={() => setNumbers((prev) => { return prev.filter((number) => number !== selectedNumber); }) } > delete </button> por cierto, useReducer no es necesario ya que su estado no es tan complejo