tengo una lista de la siguiente manera
const[users,setUsers]=useState([]);para agregar dinámicamente un nuevo usuario y actualizar la interfaz de usuario, tengo una función como la siguiente
const addNewUser = newUser => { setUsers(previousUsers=>{ //only add user if he has not been added let existingUser = previousUsers.find((x)=>x.id===newUser.id); if(!existingUser){ previousUsers.push(newUser); } return previousUsers; }); }Lamentablemente, el código anterior no actualiza la interfaz de usuario. esto es raro
¿Qué podría estar haciendo mal?
Haría la verificación fuera del estado establecido:
function addNewUser(newUser) { const existingUser = users.find(user => user.id === newUser.id); if (!existingUser) { setUsers(prev => ([...prev, newUser])); } }La razón por la que la interfaz de usuario no se vuelve a representar es porque el valor de estado no cambia. Si desea utilizar matrices u objetos en React State, debe crear una copia del valor antes de modificarlo. Puede encontrar el ejemplo básico de cómo hacerlo a continuación:
const [todos, setTodos] = useState([]); const handleAdd = (todo) => { const newTodos = [...todos]; newTodos.push(todo); setTodos(newTodos); }