React自定义挂钩:有动态设置属性的方法吗

Question

我有一行标题，我想在其中附加一个clickHandler来控制其相应列的数据的ASC和DESC。

我的强力尝试是循环所有的头，并创建一个对象，该对象将有一个属性来用一个值来表示每个头，以让钩子知道哪个是活动的，即在ASC或DESC:中

{ 1: false, 2: false, 3: false....}

代码：

function addPropToObj(arr) {
var obj = {}
arr.forEach(o => {
obj[o.id] = false;
})
return obj;
}
const activeObj = addPropToObj(userData)
function useActiveToggle(initialState = activeObj, bool = false) {
const [state, setState] = React.useState(initialState);
const toggle = React.useCallback((id) => {
return setState((previousState) => ({ ...previousState, [id]: !previousState[id] }))
}, [])
return [state, toggle]
}

阵列中只有199个对象，但如果有1000个或10000个呢？

我知道我听说JS中的对象很便宜，但感觉不对。

所以我尝试了这个：

function useActiveToggle(initialState = {}, bool = false) {
const [state, setState] = React.useState(initialState);
const toggle = React.useCallback((id) => {

return setState((previousState) => {
if (!previousState[id]) {
previousState = { ...previousState, ...{ [id]: true } }
}
return ({ ...previousState, [id]: !previousState[id] })
})
}, [])
return [state, toggle]

}

但结果却是一团糟！奇怪的行为！

我的一部分人认为我的暴力想法可能不会太可怕，如果我错了，请纠正我，但在必须处理的所有和解中，我怎么能做出这样的反应呢？

有人知道如何处理这个问题吗？

Answer 1

只是猜测这就是你想要的？

function useActiveToggle(initialState = {}, bool = false) {
const [state, setState] = React.useState(initialState);
const toggle = React.useCallback((id) => {
setState((previousState) => { // not "return setState", just do "setState"
const prevValue = Boolean(previousState[id]); // get previous value, undefined also equals to false
const nextState = {
...previousState,
[id]: !prevValue, // invert the value
};
return nextState;
});
}, [])
return [state, toggle]
}