Estoy aprendiendo a reaccionar con un tutorial, pero es un poco viejo, así que estoy tratando de encontrar nuevas formas. Hay código:
const data = [ { label: 'Going to lern react', important: true, like: false, id: 1 }, { label: 'That is good', important: false, like: false, id: 2 }, { label: 'I need a break', important: false, like: false, id: 3 }, ] const [posts, setPosts] = useState(data)La primera opción es lo que hizo en el video, pero con algunos cambios de mi parte, porque estaba usando this.setState
const onToggleImportant = (id) => { setPosts(() => { const index = posts.findIndex(elem => elem.id === id); const old = posts[index]; const newItem = { ...old, important: !old.important }; const newArr = [...posts.slice(0, index), newItem, ...posts.slice(index + 1)]; return newArr; }) }No me gustan estas rebanadas tbh. Y ahí están mis dos opciones:
const onToggleImportant = (id) => { setPosts(posts.map(el => el.id === id ? { ...el, important: !el.important } : el)); }o
const onToggleImportant = (id) => { setPosts(() => { const newPosts = posts.map(el => el.id === id ? { ...el, important: !el.important } : el); return newPosts; }) }En el último traté de evitar la mutación, pero no estoy seguro de si era necesario, porque no hay errores en la consola o en eslint. Entonces, ¿qué opciones son mejores y por qué? ¿O tal vez hay otra nueva forma de hacerlo?
Está utilizando el patrón funcional de setState que es la forma ideal de hacerlo si el valor de su nuevo estado depende del estado anterior. Pero no está utilizando el valor de estado anterior. Es el primer parámetro de la devolución de llamada dentro setState :
const onToggleImportant = (id) => { setPosts((posts) => posts.map(el => el.id === id ? { ...el, important: !el.important } : el)); } El código anterior (que usa su segundo enfoque) tampoco muta el estado, porque está usando spread con el. Además, map() devuelve una nueva matriz, por lo que su estado se actualiza bien.