Javascript: array as useEffect depencendy-CodePudding

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

What is the best way to check if array changed? Not length, but order columnOrder is array of numbers.

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

CodePudding user response：

What is the best way to check if array changed?

The best way is not to check at all. You don't need that columnOrder array state and an initialisation and an effect depending on it. Just directly set the order of your columnsState array in the handler function:

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

Also fix your mapOrder function to create a new array (and use correct comparison):

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