函数执行后，反应状态无故重置

Question

以下所有代码都在具有以下状态的函数反应组件（使用 FluentUI）中 -

const [columns, setColumns] = React.useState<IColumn[]>([]);

我在 useEffect 挂钩内将方法分配给对象属性，这意味着运行仅一次，如下所示 -

React.useEffect(
     () => {
        .....
        .....
        column.onColumnClick = (event, selectedColumn) => setSortingState(selectedColumn);
     },
[]);

setSortingState函数在useEffect hook上面定义如下-

const setSortingState = (selectedColumn: IColumn) => {
      const newColumns: IColumn[] = columns.slice();
      ..........
      ..........
      setColumns(newColumns);
 }

请注意，无论何时单击该列，其状态都是明确定义的。我已经使用开发人员工具中的断点验证了这一点。但是，点击该列后，当 setSortingState 方法被触发时，状态变为空（即 columns = []）。我不知道为什么会这样。请帮忙。理想情况下，它应该获取最新的状态值。我不明白为什么要重置状态。

编辑：下面的方法行得通吗？我在 setSortingState 方法中使用了 2 个状态，我需要更新 -

const setSortingState = (selectedColumn: IColumn) => {
  setColumns(columns => {
    const newColumns: IColumn[] = columns.slice();
    const newColumnState = columnSortState.slice();
    ..........
    ..........
    return newColumns;
  });
  setColumnState(newColumnState);
}

Answer 1

这是陈旧状态外壳的问题。 setSortingState 使用 columns 初始渲染周期的状态值，在回调范围内关闭。状态本身并不是“重置”，只是代码没有使用最新状态进行更新。

对每个状态使用 functional state update 从前一个状态更新，而不是回调范围内关闭的任何状态。在功能状态更新中，最新的状态值被传递给提供的更新程序函数。

示例：

const setSortingState = (selectedColumn: IColumn) => {
  setColumns(columns => {
    const newColumns: IColumn[] = columns.slice();
    ...
    ...
    return newColumns;
  });
  setColumnState(columnsState => {
    const newColumnState = columnSortState.slice();
    ...
    return newColumnState;
  });
}

函数执行后，反应状态无故重置

Upon function execution, react states get reset for no reason

reactjs

react-hooks

react-state

react-functional-component

fluent-ui