Реагировать setState пустые старое состояние

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 оно возвращает весь массив элементов. Почему это?

EDIT: Я думаю, что нашел проблему.

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

Когда я добавляю второй mapRanks, то оба (два) console.log, возвращающий имеет mapFirst[0] и mapSecond[165] .. Я до сих пор не понимаю, почему.

второй EDIT: Я установил его, но ...

Я добавил setTimeout для второго вызова функции mapRanks и теперь он работает. Мне нужно лучшее решение. Пожалуйста помоги.

Answer 1

Нет гарантии синхронной работы вызовов в SetState, и вызовы могут быть собраны для повышения производительности.

Вместо того, чтобы обновить состояние, сравнивает с DOM и рендеринг Изменения, каждый раз, когда вы называете setState, React собирается попробовать и пакетные вызовы вместе и выполнить их до следующего перекрашивать, так что ваш код не блока пользовательский интерфейс.

Это означает, что setState can be asynchronous, поэтому вам нужно передать функцию обратного вызова, если вы хотите дождаться изменения состояния перед его доступом.

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