React:更新嵌套状态?

问题描述 投票:0回答:4

我正在使用本地反应。假设我有这种状态:

{
persons: [{
  name: "Person",
  id: 0,
  value: "",
  percent: 50,
  messed: false
},
{
  name: "Person",
  id: 1,
  value: "",
  percent: 50,
  messed: false
}]
}

我想更新,例如,id的百分比1.如何使用this.setState进行更新?我可以每次都深入克隆人物并更新它但我需要做很多次并且人物对象相当大,所以它不是性能效率的。

目前我在做

this.state.persons[id].percent = 0;
this.forceUpdate();

这似乎不那么反应。我该怎么做?

javascript reactjs react-native
4个回答
1
投票

你必须更新整个状态,非常类似于你正在做的事情。但是,我建议不要使用this.forceUpdate()来调用this.setState({ persons: this.state.persons })

你可能想要做的是考虑将你的persons变成州。您可以根据索引为每个键创建一个唯一键。所以,索引这样的东西:

const persons = getPersonsData();
this.setState({ persons });

而是做这样的事情:

const persons = getPersonsData();
this.setState(persons.reduce((result, person, index) => Object.assign(result, { [`person${index}`]: person }));

persons.reduce位将获取您的数组并创建一个这样的对象:

{
    person0: {},
    person1: {},
    person2: {}
}

然后,每个人都将在州内持平,这样您就可以更直接地更新它。没有太大的区别,但取决于您的用例,可能是值得的。


3
投票

你不应该直接更新状态,因为在他们的文档中反应提到了几次。您可以使用的选项是spread oeprator(或Object.assign):

let newPersonsList = [...this.state.persons];
newPersonsList[2] = {...newPersonsList[2], percent:0};
this.setState({persons:newPersonsList});

注意,扩展运算符在复制数组时只有1级深度,我相信,所以你对所有人对象都采用相同的引用并将它们放在一个新的数组中。然后,您将创建一个具有更新百分比属性的新对象,并将其指定为替换旧引用。性能方面,这应该很快,因为不会发生广泛的深层复制。

或者,如果您发现自己需要更新许多嵌套对象,我建议您查看以下库:immutability-helper。它专门为这种情况而设计。


0
投票

我只想使用setState。让React担心性能优化

   this.setState(object.assign({}, this.state, 
      this.state.persons.map(p => {
        if (p.id === id) p.percent = 0;
      }
   )))

0
投票

另一种改变状态的方法,但是按人名整理状态可能是更好的选择。

 state = {
       persons: [{
          name: "Person",
          id: 0,
          value: "",
          percent: 50,
          messed: false
        },
        {
          name: "Person",
          id: 1,
          value: "",
          percent: 50,
          messed: false
        }]
 }

 this.setState(({persons}) => {
   persons
     .filter(i => i.id === 1)
     .map(i => i.percent = 0)
 })}
© www.soinside.com 2019 - 2024. All rights reserved.