JavaScript：ANARY作为使用效果depencendy

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])
    );
}