Tengo una función que obtiene la entrada del usuario y actualiza la matriz si la misma clave ya está disponible. con la ayuda de este artículo
Así es como se ve;
const handleClickYes = (question) => { // find if question is in the data array const hasQuestion = data.find(({ parentId }) => question.id === parentId) const indexOfQuestion = data.indexOf(hasQuestion) if (hasQuestion) { // update the value with specific selected index in the array. data[indexOfQuestion] = { question: question.if_yes, parentId: question.id, userChoice: 'YES', child: [] } } else { setData((data) => data.concat({ question: question.if_yes, parentId: question.id, userChoice: 'YES', child: [] })) } localStorage.setItem('deviceReport', JSON.stringify(data)) }Estoy usando localStorage para conservar el estado
const deviceReport = localStorage.getItem('deviceReport') ? JSON.parse(localStorage.getItem('deviceReport')) : [] const [data, setData] = useState(deviceReport)Aquí el problema es que si uso setData, se actualiza instantáneamente pero al reemplazar la matriz en esta parte
data[indexOfQuestion] = { question: question.if_yes, parentId: question.id, userChoice: 'YES', child: [] }no actualiza los datos asignados en la parte JSX. ¿Cómo puedo configurarlo para actualizarlo en setState. ? O cualquier otra opción mejor para actualizar la matriz.
No está llamando a setState() dentro de la primera mitad de su bloque if . Además, nunca cambie el estado directamente . Haz una copia mutable, así:
const handleClickYes = (question) => { // find if question is in the data array const hasQuestion = data.find(({ parentId }) => question.id === parentId); const indexOfQuestion = data.indexOf(hasQuestion); // copy data to mutable object let newData = [...data]; if (hasQuestion) { // update the value with specific selected index in the array. newData[indexOfQuestion] = { question: question.if_yes, parentId: question.id, userChoice: "YES", child: [], }; } else { // concat existing data with a new question newData = [ ...newData, { question: question.if_yes, parentId: question.id, userChoice: "YES", child: [], }, ]; } localStorage.setItem("deviceReport", JSON.stringify(newData)); setData(newData); };