javascript - React setState 清空旧状态

Question

我遇到了问题，正在寻求帮助。 我有一个名为 mapRanks 的函数。它在 componentWillMount 中被调用，并且基本上通过字符串数组使用 map 元素的 setState 进行调用。它适用于一个数组，但我需要使用多个不同的数组多次运行它。

发生的情况是，除了最后一个状态之外，所有先前的状态都变成了 array[0]。

请看一下:

export const mapRanks = (options, ranks, count, element) => {
  component = options.component;   // this component
  group = options.group;           // can be 'mapFirst', 'mapSecond', ...
  let col = count;
  let j = count;
  let k = count;

  const map = ranks.map((rank, i) => {
    if (i === col) {
      col = col + j--;
      if (j === 0) {
        j = k--;
      }
      return [element(i, group, rank), <div key={ i } className="clearfix"></div>];
    }
    return [element(i, group, rank)];
  });

  const newState = update(component.state, { maps: { [group]: { $set: map } } });
  component.setState(newState);

  setTimeout(() => { console.log(component.state.maps); }, 7000);
};

我的状态如下所示:

  constructor() {
    super();
    this.state = {
      maps: {
        mapFirst: [],
        mapSecond: [],
        mapThird: [],
        mapFourth: [],
      },
    };
  }

另外，我不认为它相关，但我想知道...您看到上面的 console.log 的 setTimeout 了吗？我必须使用 setTimeout 因为状态返回 array[0] 但使用 setTimeout 时，它返回整个元素数组。这是为什么？

编辑:我想我发现了问题。

  componentWillMount() {
    mapRanks(
      { component: this, state: 'mapFirst' }, ranksFirst, 9, element
    );
    mapRanks(
      { component: this, state: 'mapSecond' }, ranksSecond, 8, element
    );
  }

当我添加第二个 mapRanks 时，返回的两个(两个)console.log 具有 mapFirst[0] 和 mapSecond[165]..我还是不明白为什么。

第二次编辑:我修复了它但是...

我为第二个 mapRanks 函数调用添加了 setTimeout，现在它可以工作了。我需要一个更好的解决方案。请帮忙。

Answer 1

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

不是更新状态，而是在每次调用 setState 时比较 DOM 并呈现更改，React 将尝试将调用批处理在一起，并在下一次重绘之前执行它们，这样您的代码就不会阻塞 UI。

这意味着 setState can be asynchronous ，因此如果您想等待状态更改后再访问它，则需要传递回调函数。

component.setState(newState, () => {
  console.log(component.state.maps);
});