Estoy tratando de cambiar un valor profundamente anidado dentro de un objeto usando una ruta de cadena de la clave para acceder al objeto.
Configuración:
const [payload, setPayload] = useState({ name: "test", download: true, downloadConfiguration: { product: { initialDownloadLength: 3, }}})Cuando se cambia el valor del objeto:
const handleChange = (prop: any) => (e: React.ChangeEvent<HTMLInputElement>) => { if (typeof e.target.value === "number") { setPayload({ ...payload, [prop]: parseInt(e.target.value) }); } if (typeof e.target.value === "string") { setPayload({ ...payload, [prop]: e.target.value }); } };Cuando cambio los valores en la capa más externa del objeto, funciona bien y actualiza el valor, por ejemplo.
onChange={handleChange("name")}pero no puedo acceder a la clave initialDownloadLength que está anidada dentro del producto y downloadConfiguration. Probé "downloadConfiguration.product.initalDownloadLength" y usé corchetes, etc., pero cada vez crea un nuevo objeto en la capa superior del objeto.
Puede usar la solución aquí dinámicamente-establecer-propiedad-de-objeto-anidado en su método handleChange de esta manera:
// set method copied from the above link function set(obj, path, value) { var schema = obj; var pList = path.split('.'); var len = pList.length; for(var i = 0; i < len-1; i++) { var elem = pList[i]; if( !schema[elem] ) schema[elem] = {} schema = schema[elem]; } schema[pList[len-1]] = value; } ... const handleChange = (prop) => (e) => { let value; if (typeof e.target.value === "number") { value = parseInt(e.target.value); } if (typeof e.target.value === "string") { value = e.target.value; } setPayload((prevState) => { const newState = {...prevState}; set(newState, prop, value); return newState; }) }; .... onChange={handleChange("downloadConfiguration.product.initialDownloadLength")}