Javascript: array作为useEffect依赖

Question

useEffect(() => {
changeColumnsState(mapOrder({array: columnsState, order: columnOrder, key: 'name'}))
}, [JSON.stringify(columnOrder)])

检查数组是否改变的最好方法是什么?不是长度，而是顺序columnOrder为数字数组。

export const ColumnsCustomizeModalForm: FunctionComponent<
ColumnsCustomizeModalFormProps
> = ({ columns, onClose, modalProps }) => {
const columnInitial = columns.map((column) => column.name)
const [columnOrder, setColumnOrder] =
useState<string[]>(columnInitial)
const [columnsState, changeColumnsState] = useState(mapOrder({array: columns, order: columnOrder, key: 'name'}))
useEffect(() => {
changeColumnsState(mapOrder({array: columnsState, order: columnOrder, key: 'name'}))
}, [JSON.stringify(columnOrder)])
const setColumnVisibility = (name: string) => {
const newColumnsState = columnsState.map((column) => {
if(column.name === name) {
return {...column, isHidden: !column.isHidden}
}
return column
})
changeColumnsState(newColumnsState)
}
return (
<ColumnsCustomizationModalView
columns={columnsState}
handleChangeOrder={setColumnOrder}
handleColumnVisibility={setColumnVisibility}
handleClose={onClose}
modalProps={modalProps}
/>
)
}

export const mapOrder = <ObjectType, KeyType extends keyof ObjectType>({array, order, key}: {array: ObjectType[], order: ObjectType[KeyType][], key: KeyType}) => {
const sortedArray = array.sort( function (a, b) {
var A = a[key], B = b[key];

if (order.indexOf(A) > order.indexOf(B)) {
return 1;
} else {
return -1;
}
});
return sortedArray;
};

Answer 1

检查数组是否更改的最佳方法是什么?

最好的方法是根本不检查。你不需要columnOrder数组状态和初始化以及依赖于它的效果。只需在处理函数中直接设置columnsState数组的顺序:

export const ColumnsCustomizeModalForm: FunctionComponent<
ColumnsCustomizeModalFormProps
> = ({ columns, onClose, modalProps }) => {
const [columnsState, changeColumnsState] = useState(columns);
const setColumnOrder = (columnOrder: string[]) => {
changeColumnsState(array => mapOrder({array, order: columnOrder, key: 'name'}))
};
const setColumnVisibility = (name: string) => {
changeColumnsState(cols => cols.map(column => {
if (column.name === name) {
return {...column, isHidden: !column.isHidden}
}
return column
}));
};
return (
<ColumnsCustomizationModalView
columns={columnsState}
handleChangeOrder={setColumnOrder}
handleColumnVisibility={setColumnVisibility}
handleClose={onClose}
modalProps={modalProps}
/>
);
}

也修复你的mapOrder函数来创建一个新的数组(并使用正确的比较):

export function mapOrder<ObjectType, KeyType extends keyof ObjectType>({array, order, key}: {array: ObjectType[], order: ObjectType[KeyType][], key: KeyType}) {
return array.slice().sort((a, b) =>
//              ^^^^^^^^
order.indexOf(a[key]) - order.indexOf(b[key])
);
}