Как выбрать одну строку в таблице для редактирования в диалоге, но продолжать выбирать последнюю, редактирование работает, но только для последней

Question

Вот мой код, данные получены от API, но извлечены, чтобы код работал в песочнице, возможно, можно заменить данные, если это поможет. Был бы признателен за любую помощь. https://codesandbox.io/s/modest-thunder-0ns6o?file= / src / App. js

<TableBody>
    {item.userBankAccount.map((item, index) => {
      return (
        <TableRow hover key={index}>
          <TableCell>{item.bankName}</TableCell>
          <TableCell>{item.bankAddress}</TableCell>
          <TableCell>{item.bankAddress}</TableCell>
          <TableCell>{item.bankSwift}</TableCell>
          <TableCell>{item.accountName}</TableCell>
          <TableCell>{item.accountNo}</TableCell>
          <Dialog
            open={this.state.dialogueEditOpen}
            onClose={this.handleClose}
            aria-labelledby="form-dialog-title"
            index={index}
          >
            <DialogTitle id="form-dialog-title">Edit Bank</DialogTitle>
            <DialogContent>
              <TextField
                label="Bank Name"
                name="bankName"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.bankName}
                variant="outlined"
              />
              <TextField
                label="Bank Address"
                name="bankAddress"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.bankAddress || ""}
                variant="outlined"
              />
              <TextField
                label="Bank Swift"
                name="bankSwift"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.bankSwift || ""}
                variant="outlined"
              />

              <TextField
                label="Account Name"
                name="accountName"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.accountName || ""}
                variant="outlined"
              />
              <TextField
                label="AccountAddress"
                name="accountAddress"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.accountAddress || ""}
                variant="outlined"
              />
              <TextField
                label="AccountNo"
                name="accountNo"
                onChange={e => this.onChangeUserBankAccount(e, index)}
                type="text"
                value={item.accountNo || ""}
                variant="outlined"
              />
            </DialogContent>
            <DialogActions>
              <Button
                onClick={e => this.handleClose(e)}
                color="primary"
              >
                Cancel
              </Button>
              <Button
                onClick={e => this.handleSubmit(e)}
                color="primary"
              >
                Save Changes
              </Button>
            </DialogActions>
          </Dialog>
          <TableCell align="right">
            <IconButton onClick={e => this.handleOpenEdit(e, index)}>
              <SvgIcon fontSize="small">
                <EditIcon />
              </SvgIcon>
            </IconButton>

            <IconButton onClick={e => this.handleRemove(e, index)}>
              <SvgIcon fontSize="small">
                <Trash2 />
              </SvgIcon>
            </IconButton>
          </TableCell>
        </TableRow>

Answer 1

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