Reactjs，当我删除元素时数组索引发生变化答案

【问题标题】：Reactjs, array index getting changed when i drop elementReactjs，当我删除元素时数组索引发生变化
【发布时间】：2020-01-11 23:21:29
【问题描述】：

我正在使用复选框列表中的项目创建表格，但是当我选择并提交一些项目时，剩余项目的索引正在更改，因此我无法再次提交剩余项目。

这是我的代码：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      allStudent: [
        {
          id: '1',
          name: 'student1',
        },
        {
          id: '2',
          name: 'student2',
        },
        {
          id: '3',
          name: 'student3',
        },
      ],
      studentList: [],
      checked: [false, false, false],
    };
    this.handleOpen = () => {
      this.setState({ open: true });
    };

    this.handleClose = () => {
      this.setState({ open: false });
    };

    this.updateCheck = this.updateCheck.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit() {
    let students = [];
    for (let idx in this.state.checked) {
      if (this.state.checked[idx] && students.indexOf(this.state.checked[idx]) === -1) {
        students.push(this.state.allStudent[idx]);
      }
    }
    console.log('students', students);
    this.setState({
      studentList: update(this.state.studentList, { $push: students }),
    });
  }

  updateCheck(e, isChecked, i) {
    e.preventDefault();
    console.log('selected', i, isChecked);
    this.setState({
      checked: update(this.state.checked, { [i]: { $set: isChecked } }),
    });
  }

  render() {
    const actions = [
      <FlatButton label="Cancel" primary={true} onClick={this.handleClose} />,
      <FlatButton label="Submit" primary={true} keyboardFocused={true} onClick={this.handleSubmit} />,
    ];

    return (
      <MuiThemeProvider>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', float: 'left' }}>
          <Card style={{ width: '100%' }}>
            <CardTitle title="Test" />
            <div style={{ float: 'left', width: '25%' }}>
              <div style={{ float: 'right', overflow: 'auto' }}>
                <RaisedButton label="+" onClick={this.handleOpen} />
              </div>
              <Dialog
                title="All students"
                actions={actions}
                modal={false}
                open={this.state.open}
                onRequestClose={this.handleClose}
                autoScrollBodyContent={true}
              >
                <div>
                  {this.state.allStudent
                    .filter(student => {
                      return !(student.id in _.keyBy(this.state.studentList, 'id'));
                    })
                    .map(
                      function(allStudent, i) {
                        return (
                          <Checkbox
                            key={allStudent.name}
                            label={allStudent.name}
                            style={styles.block}
                            checked={this.state.checked[i]}
                            onCheck={(e, isChecked) => this.updateCheck(e, isChecked, i)}
                          />
                        );
                      }.bind(this),
                    )}
                </div>
              </Dialog>

              <Table selectable={false}>
                <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
                  <TableRow>
                    <TableHeaderColumn style={{ width: '15%' }}>StudentList</TableHeaderColumn>
                  </TableRow>
                </TableHeader>
                <TableBody displayRowCheckbox={false}>
                  {this.state.studentList.map(
                    function(student, i) {
                      console.log('id=', student.id);
                      return (
                        <TableRow key={student.id}>
                          <TableRowColumn style={{ width: '10%' }}>{student.name}</TableRowColumn>
                        </TableRow>
                      );
                    }.bind(this),
                  )}
                </TableBody>
              </Table>
            </div>
          </Card>
        </div>
      </MuiThemeProvider>
    );
  }
}

当我再次提交时出现此错误，“flattenChildren(...): Encountered two children with the same key”。因为剩余项目的索引正在改变，我认为。

【问题讨论】：

你的 student.id 是唯一的吗？

标签： javascript arrays reactjs dictionary

【解决方案1】：

<Checkbox
  key={allStudent.name}
  label={allStudent.name}
  style={styles.block}
  checked={this.state.checked[i]}
  onCheck={(e, isChecked) => this.updateCheck(e, isChecked, i)}
/>

<TableRow key={student.id}>

您收到此警告是因为 key 应该是唯一的，请尽量使其唯一。

还要注意，您会根据索引找到很多示例，这不是最佳实践。

查看this了解更多信息

【讨论】：

【解决方案2】：

请尝试使用.map() 的索引值作为键，而不是student.id，因为这可能不是唯一的。

key={index}

在你的情况下应该是，

<TableRow key={i}>

【讨论】：