我的狀態包含一個看起來像這樣的物件
stateObject = {0: 400, 1: 500, 2: 600}
在 componentWillUpdate 上，我的組件重新渲染，并添加了一個額外的組件（列）并繼承了 0 鍵索引值（400）。
我想將新狀態設定為看起來像下面的狀態，以便保留原始值但等于增加的索引鍵（這樣最新的列不會繼承值 400 和下一列原始列是否具有正確的值）
前任。0: 400 現在等于 1:400，1:500 現在等于 2:500 等等。這將允許正確的列具有他們需要的正確值
newStateObject = {0: undefined, 1: 400, 2: 500, 3: 600}
解決這個問題的最佳方法是什么？我嘗試使用 Object.assign 創建一個與此所需物件結構匹配的新物件并將其設定為 state，但我無法讓它作業。
任何幫助或建議表示贊賞！
uj5u.com熱心網友回復：
考慮到 obj 是回呼表示中的前一個狀態物件this.setState(prevState => {})，以下應該可以作業。請注意，我沒有添加 ，{0:undefined}因為那是多余的
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)
uj5u.com熱心網友回復：
最簡單的方法是將狀態存盤為陣列。0, 1, 2, 3 似乎無論如何都被用作索引。使用陣列時，您可以undefined輕松地添加前綴。
// current state is [400, 500, 600]
// 0 1 2
setState(state => [undefined, ...state])
// new state will be [undefined, 400, 500, 600]
// 0 1 2 3
uj5u.com熱心網友回復：
這可能是實作您想要的解決方案，我現在無法弄清楚，但我認為它可以更好地實施。
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]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/488509.html
標籤：javascript 反应 目的