Estoy tratando de crear una función que actualice un objeto en el componente funcional de reacción. Lo que estaba tratando de hacer es:
const [content, setContent] = useState({}); const applyContent = (num: number, key: string, val: string) => { if (content[num] === undefined) { content[num] = {}; } content[num][key] = val; setNewContent(newInput); };Pero sigo recibiendo un error que indica que el contenido no tiene un atributo numérico. En Vanilla JS funcionaría. ¿Qué me falta para que funcione con el componente funcional de reacción?
El setter para el estado de su componente se ha escrito incorrectamente. Eche un vistazo al código a continuación.
import React, { useState } from 'react'; import './style.css'; export default function App() { const [content, setContent] = useState({}); const applyContent = (num, key, val) => { //gets the appropriate inputs let updatedContent = content; let value = {}; value[key] = val; updatedContent[num] = value; //this inserts a new object if not present ot updates the existing one. setContent({ ...updatedContent }); }; return ( <div> <h1>Click buttons to change content</h1> <p>{JSON.stringify(content)}</p> <button onClick={(e) => applyContent(0, 'a', 'b')}>Add</button> <button onClick={(e) => applyContent(1, 'c', 'd')}>Add</button> <button onClick={(e) => applyContent(0, 'e', 'f')}>Add</button> </div> ); }el contenido es un valor de sólo lectura. No debes mutar directamente esto. Úselo solo para mostrar datos o para copiar estos datos a otro valor auxiliar.
setContent es una función que establece el contenido.
Hay dos formas de configurar los datos.
setContent(value) <-- set directly setContent(prevState => { return { ...prevState, ...value } })En el segundo ejemplo, usará el valor anterior, lo copiará y luego lo anulará con un valor nuevo. Esto es útil si solo está actualizando una parte de un objeto o matriz.
Si está trabajando con un objeto profundamente anidado, es posible que la copia superficial no sea suficiente y que primero deba copiar en profundidad el valor de su contenido. De lo contrario, use el ejemplo de prevState para actualizar solo la parte de ese contenido
const [content, setContent] = useState({}); const applyContent = (num:number,key:string,val:string) => { const newContent = {...content} // Shallow copy content if (content[num] === undefined) { //content[num] = {}; <-- you cant directly change content. content is a readOnly value newContent[num] = {} } newContent[num][key] = val; //setNewContent(newInput); setContent(newContent) // <-- use "setContent" to change "content" value }