Question

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

除了最后一个状态之外，前一个状态变为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: [],
      },
    };
  }

此外，我不认为这是相关的，但我想知道......你看到上面的setTimeout到console.log了吗？我必须使用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] ..我仍然不明白为什么。

第二次编辑：我修好了但是......

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

Answer 1

无法保证对setState的调用进行同步操作，并且可以对调用进行批处理以获得性能提升。

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

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

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

React setState清空旧状态

1 个答案: