Tengo un estado que contiene un objeto que se parece a esto
stateObject = {0: 400, 1: 500, 2: 600}En componentWillUpdate, mi componente se vuelve a representar y se agrega un componente adicional (columna) y transfiere el valor de índice de clave 0 (400).
Quiero configurar el nuevo estado para que se parezca al estado de abajo, para que los valores originales se mantengan pero sean iguales a las claves de índice incrementadas (esto es para que la columna más nueva no transfiera el valor 400 y la siguiente columna que fue la columna original tiene el valor correcto)
ex. 0: 400 ahora sería igual a 1:400, 1:500 ahora sería igual a 2:500, etc. Esto permitiría que las columnas correctas tuvieran los valores correctos que necesitan
newStateObject = {0: undefined, 1: 400, 2: 500, 3: 600}¿Cuál es la mejor manera de abordar esto? Intenté usar Object.assign para crear un nuevo objeto que coincida con esta estructura de objeto deseada y configurarlo para indicarlo, pero no puedo hacer que funcione.
¡Cualquier ayuda o consejo es apreciado!
Teniendo en cuenta que obj es el objeto de estado anterior en la representación de devolución de llamada de this.setState(prevState => {}) , lo siguiente debería funcionar. Tenga en cuenta que no estoy agregando {0:undefined} porque eso es redundante
const obj = {0: 400, 1: 500, 2: 600} const keys = Object.keys(obj) const incrementedArray = keys.map(key => ({[`${Number(key)+1}`]:obj[key]})) const incrementedObject = incrementedArray.reduce((map,obj)=>({...map,...obj}),{}) console.log('incrementedObject',incrementedObject)Lo más fácil sería si almacena el estado como una matriz. 0, 1, 2, 3 parecen usarse como índice de todos modos. Cuando usa una matriz, puede prefijar undefined fácilmente.
// current state is [400, 500, 600] // 0 1 2 setState(state => [undefined, ...state]) // new state will be [undefined, 400, 500, 600] // 0 1 2 3Esta puede ser una solución para alcanzar lo que desea, no puedo entenderlo ahora, pero creo que se puede implementar mejor.
const [stateObj, setStateObj] = useState({0: 400, 1: 500, 2: 600}); const onClick = useCallback((firstIdxValue) => { setStateObj((prevValue) => { const data = [firstIdxValue, …Object.values(prevValue)]; return data.reduce((prev, cur, idx) => { return {…prev, [idx] : cur}; }, { }) }); },[setStateObj]);