反应setState清空旧状态

Question

I'm running into a problem, looking for help. I have a function called mapRanks . It gets called in componentWillMount and basically setState of elements using map through array of strings. It works fine with one array but I need to run it multiple times with multiple different arrays.

What happens is all the previous state becomes array[0] except the last one.

Please take a look at it:

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

My state looks like this:

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

Also, I don't think it's related but I'm wondering... Do you see the setTimeout to console.log above? I had to use setTimeout because the state was returning array[0] but with setTimeout , it returns the whole array of elements. Why is that?

EDIT: I think I found the problem.

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

When I add the second mapRanks , the both (two) console.log that returns has mapFirst[0] and mapSecond[165] .. I still don't understand why.

2nd EDIT: I fixed it but...

I added setTimeout for the second mapRanks function call and now it works. I need a better solution. Please help.

Answer 1

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

Rather than updating the state, diffing the DOM and rendering the changes each time you call setState , React's going to try and batch the calls together and execute them before the next repaint, so that your code doesn't block the UI.

This means that setState can be asynchronous , so you'll need to pass a callback function if you want to wait for the state to be changed before accessing it.

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