Question

为什么这么难做或找到答案？

我有我的州

state: {
   people: [
     {name: 'tom'},
     {name: 'rich'},
   ]
}

为什么要更新Tom to Pete的名称这么难？

const people = this.state.people.slice();
people[i].name = value;
this.setState({ people });

我可以这样做，但1）i未定义，2）它看起来很乱

更新对象键是不是更优雅的解决方案？

Answer 1

如果您尝试重命名第一个元素，则需要传递整数索引：

const people = this.state.people.slice();
people[0].name = value;
this.setState({ people });

如果需要通过name tom指定重命名元素，请使用例如es6 .findIndex方法：

const people = this.state.people.slice();
const index = people.findIndex(item => item.name === 'tom');
if(index >= 0) {
  people[index].name = value;
}
this.setState({ people });

Answer 2

你没有循环，所以是i是未定义的。

假设你有一个项目的点击处理程序..

{this.state.people.map( (person, idx) => <div onClick={this.handleClick.bind(this, idx)>Person here!</div>)}

现在从这里你有一个索引来更新来自...的记录

然后你的人更新你可以进入句柄功能const person = {...this.state.people[idx]}

注意我在这里为这个人创建一个新对象，所以一定不要直接改变状态对象。假设您在某个地方有另一个值或状态变量，那么您可以将该值分配给该人

编辑：

handleClick = (idx, e) => {
    const { value } = e.target;
    const robots = [].concat(this.state.robots);
    const robot = robots[idx]
    robot.name = value;
    robots[idx] = robot;
    this.setState({robots})
}

Answer 3

假设您在JSX中打印名称，如下所示

const { people } = this.state;
return people.map((person, index) => {
    <p
        onClick={() => {
            const newPeople = people.slice();
            newPeople[index] = 'some calculation to find new name';
            this.setState({ people: newPeople });
        }}
    >
        {person.name}
    </p>
});

在反应数组状态中更新对象键

3 个答案: