Javascript 如何使用react钩子动态创建处于状态的对象？

直到现在，在我的代码中，我有一个对象可以表示页面上图像的所有数据

this.state={
img-1：{
x:0,，
y:0，
轮换：0
},
img-2：{
x:20，
y:200，
轮换：50
}
}

每次对象接收到一个新的子对象时，它都会向状态添加一个新的

img id

，该状态在每次

更新时都会更新

将诸如计算坐标或旋转的功能移动到它们自己的自定义钩子中，将极大地提高我的代码的可维护性和测试性，但我并不认为有什么好方法可以将所有这些数据存储在具有钩子的集中对象中

据我所知，我必须设置一个新的

[img-1，setImg-1]=useState（{x:0，y:0，旋转：0}）

据我所知，对于每一个孩子来说，这是不可能的，因为钩子必须在顶层声明，或者设置一个非常深的对象来更新：

[images，setImages]=useState({
img-1：{
x:0,，
y:0，
轮换：0
}
})
const createImg=（newImg）=>{setImages（{…images，newImg}}
const updateImg=（id，updatedImg）=>{
setImages（{…images，[`img-${id}`]{…updatedImg}}
)}

---

是否有一种更干净/更可读的方法，或者我只需要将所有内容嵌套在一个对象中？

而不是使用

useState

，您可以使用

useReducer

更好地控制您的状态并处理状态的动态添加

const initialState = {
    img-1: {
        x: 0,
        y: 0,
        rotation: 0
    }
}

const reducer= (state, action) =>{
   switch(action.type) {
        'ADD_IMAGE': return  {
             ...state,
             [action.itemkey]: action.payload
         }
         'UPDATE_IMAGE: return {
             ...state,
             [action.id]: {...state[action.id], ...action.payload}
         }
         default: {
            return state;
         }
   }
}

在功能组件中

const [state, dispatch] = useReducer(reducer, initialState);


const createImg = (newImg) => { dispatch({ type: 'ADD_IMAGE', payload: {newImg}, itemKey: `item-${Object.keys(state).length + 1}`

const updateImg = (id, updatedImg) => {
   dispatch({type: 'UPDATE_IMAGE', id, payload: updatedImg })
)}

---

为什么更新很笨重？枚举属性非常糟糕，最好使用数组。而

-

在变量名中不是有效字符<代码>[img-1，setImg-1]=…这些将是以后的实际id。-有什么问题吗？不使用它只是惯例，还是会引起问题？