Слияние состояния с объектом из цикла реагировать

Question

Это в реакции и es2015, и я не помещал импорт и вызывал различные файлы .js, но если вы прочитали его, они назовут друг друга штрафом.

Так что я хочу изменить состояние на ключ, значение whos - пустой объект. Я пробовал это, и он отлично работает. Теперь мне нужно слить другой объект с пустым объектом в состояние. Это нужно сделать из функции, вызываемой из цикла в функции, которая вызывается из map-функции. Я получаю правильный объект для последней функции, но когда я пытаюсь добавить каждое значение ключа, установленное для объекта в состоянии, приходит только один набор, где я ожидал три. Я попытаюсь прояснить код. Я пытаюсь упростить код, поэтому, если мне не хватает ничего важного, дайте мне знать. (Извините за имена)

Все под срабатывает OnClick

//item.js 
[...] 
let title = this.props.title; 

someArrayWithObjs.map(function(item, key) { 
    checkProcess(title); 
}) 

Эта часть работает отлично, насколько я могу сказать

//yet.js 
[...] 
constructor(props) { 
super(props); 
this.state = {vitalObj: {}} 
} 

checkProcess(title) { 
let importantObj = {}; 

for (let value in needValue) { 
    if (needValue[value] <= presentLvl[value]) { 
    importantObj[title] = true; 
    } else { 
    importantObj[title] = false; 
    return makeRenderObj(importantObj); 
    }; 
} 
return makeRenderObj(importantObj); 
} 

Это также, кажется, дает мне результат, я хочу, но потом появляются хитрые части. Я хочу что-то вроде:

makeRenderObj(importantObj) { 
let vitalObj = this.state.vitalObj; 

    console.log(importantObj); 
let together = React.addons.update(importantObj, {$merge: vitalObj}); 
    console.log(together); 

this.setState({vitalObj: together}); 
} 

Я читал где-то я мог бы быть мутирую состояние, поэтому я попытался неизменен. Я не помню точно, что я пробовал раньше, поэтому я не буду путать с написанием плохого примера.

последних двух console.logs дают мне этот выход, 1. нажмите

{key1: correctValue} //good 
{key1: correctValue} //good 
{key2: correctValue} //good 
{key2: correctValue} //why not key1 as well? 
{key3: correctValue} // good 
{key3: correctValue} //and again ?? 

И это на второй клик

{key1: correctValue} //good 
{key3: correctValue, key1: correctValue} //?? 
{key2: correctValue} //good 
{key3: correctValue, key2: correctValue} //?? 
{key3: correctValue} // good 
{key3: correctValue} //?? 

Так я получаю правильные объекты с нужными ключами и правильные ценности, но я схожу с ними неправильно - по крайней мере, это то, что я думаю.

Я хотел бы знать, почему это происходит, и, возможно, как я могу его переписать?

Answer 1

setState иногда асинхронный (вроде), поэтому запуск пучка в цикле не позволит вам работать с самым последним значением с каждой итерацией. Потому что this.state не сразу обновляется, когда вы вызываете this.setState. К счастью, у setState есть другая подпись для работы с этим делом.

setState((incrementalState)=> { 
    let vitalObj = incrementalState.vitalObj; 
    let together = React.addons.update(importantObj, {$merge: vitalObj}); 
    return { vitalObj: together } 
}) 

По существу передавая функции означает, что каждая функция будет вызываться постепенно (возможно, позже), но в порядке, поэтому каждая итерация цикла вас работает с sstate из последней итерации