2016-12-19 3 views
2

Мое состояние объекта выглядит примерно так:ReactJS: Доступ к объекту внутри государства и обновляя его

getInitialState: function(){ 
     return { 
      people: [ 
      {'id': 1, 'first': "Jake", 'last': "A", 'title': "Associate", 'company': "Twitter", 'stage': "Onsite"}, 
      {'id': 2, 'first': "Graham", 'last': "R", 'title': "Eng", 'company': "GitHub", 'stage': "Recruiter"} 
      ], 
     } 
    }, 

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

updateCandidate: function() { 
    this.setState({ 
     ....how do I pick Jake's company and change it to Google? 
    )} 
) 

Быстрое обновление:

1.) добавил идентификаторы в состояние

2.) Эта вспомогательная функция:

var RenderPeople = React.createClass({ 
    change: function(e) { 
     var id = this.props.user.id 
     var user = this.props.user 
     this.props.updateCandidate(id, user, e.target.value) 
    }, 

var Dashboard = React.createClass({ 
    getInitialState: function(){ 
     return { 
      people: [ 
      {'id': 1, 'first': "Jake", 'last': "A", 'title': "Associate", 'company': "Twitter", 'stage': "Onsite"}, 
      {'id': 2, 'first': "Graham", 'last': "R", 'title': "Eng", 'company': "GitHub", 'stage': "Recruiter"} 
      ], 
     } 
    }, 

    updateCandidate:function(id, user, newStage){ 
     this.state.people.map(val => { 
      if(val['id'] === id){ 
       console.log(val); // this works! 
       console.log(newStage); //this works! 
       this.setState({ 
        [val['stage']] : newStage 
       }, function() {'this ran'}); 
      } 
     }) 
    }, 

По какой-то причине this.setState не работает. Почему?

ответ

2

Карта через массив людей, когда вы найдете элемент, значение first равно Jake, используйте Spread Syntax ({ ...}), чтобы вернуть измененный объект.

const newPeople = people.map(val => { 
    if(val['first'] === "Jake"){ 
    return { ...val, val['company']: 'Google'}; 
    } 
}); 

//EDIT: 
// call setState after the call to map is complete: 
this.setState({people: newPeople}): 
+0

совет: вам не нужно, чтобы добавить 'this' к' карте() 'вызова при использовании' => 'для функции Анон :) –

+0

@MatthewHerbst: Спасибо. Это привычная привычка от необходимости делать это в синтаксисе класса ES6 :) – Pineda

+0

Интересно, что разница в производительности между распространением и использованием 'Object.assign ({}, val, {company: 'Google'})' –

Смежные вопросы