到目前为止,在我的代码中,我有一个对象可以表示页面上图像的所有数据
this.state = {
img-1: {
x: 0,
y: 0,
rotation: 0
},
img-2: {
x: 20,
y: 200,
rotation: 50
}
}
每次对象收到一个新的 child 时,它都会添加一个新的 img-id
说明每次都会更新<img id=${id} update={this.update} />
已更新。
将计算坐标或旋转等功能移动到它们自己的自定义 Hook 中会在可维护性和测试方面极大地改进我的代码,但我真的没有看到将所有这些数据存储在带有 Hook 的集中对象中的好方法.
据我所知,我必须设置一个新的
[img-1, setImg-1] = useState({ x: 0, y:0, rotation: 0 })
对于每个 child ,据我所知,这是不可能的,因为必须在顶层声明钩子(Hook)或设置一个非常深的对象,更新起来有点笨拙:
[images, setImages] = useState({
img-1: {
x: 0,
y: 0,
rotation: 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) {
case 'ADD_IMAGE':
return {
...state,
[action.itemkey]: action.payload,
};
case '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 });
};
关于javascript - 如何使用 react 钩子(Hook)动态创建处于状态的对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54783904/