Почему при нажатии на Delete на экране пропадает самый последний отображаемый элемент, а не тот, что должен, хотя на сервере удаляется нужный?

Question

[vertically-challenged]

Если вывести состояние из функции onClickDelete в Row.jsx, то в состоянии отображается все корректно, на сервере так же удаляется выбранная запись, но что касается отрисовки после удаления записи, то с экрана пропадает самая последняя запись из списка, а выбранная для удаления остается. После обновления страницы отображаются уже корректные данные.

App.js:

import React, { useState, useEffect } from 'react'
import './App.scss'
import API from './API/api'
import Table from './modules/Table/Table'

function App() {
  const [records, setRecords] = useState([])
  const [update, setUpdate] = useState(false)

  useEffect(() => {
    
    API.getData().then((records) => {
      setRecords(records)
    })
    
    return () => {
      setUpdate(false)
    }
  }, [update])

  return (
    <div className='container'>
      <Table records={records} setUpdate={setUpdate}/>
    </div>
  )
}

export default App

Table.jsx:

import React from 'react'
import Row from './Row'
import HeaderRow from './HeaderRow'

export default function Table({records, setUpdate}) {

  const createRow = () => {
    const Rows = []
    for (let key in records) {
      Rows.push(<Row key={key} record={records[key]} setUpdate={setUpdate}/>)
    }
    return Rows
  }

  return (
    <table className='table'>
      {/* <button onClick={() => {setUpdate(true)}}>BUTTON</button> */}
      <tbody>
        <HeaderRow state={records}/>
        {createRow()}
      </tbody>
    </table>
  )
}

Row.jsx

import React, { useState, useEffect } from 'react'
import Button from '../common/Button/Button'
import Cell from './Cell'
import API from '../../API/api'

export default function Row({record, setUpdate}) {
  const [row, setRow] = useState(record)

  const inputOnChangeHandler = (event) => {
    const newRow = {...row, edit: true}
    newRow.data[event.target.name] = event.target.value
    setRow(newRow)
  } 

  const onClickDelete = () => {
    API.deleteRecord(record._id).then((records) => {
      setUpdate(true)
    })
  }

  const onClickSave = () => {
    API.saveRecord(row).then(() => {
      setUpdate(true)
    })
  }

  const createButtons = () => {
    const buttons = [ 
      <Button onClick={onClickDelete}>Delete record</Button>, 
      <Button onClick={onClickSave}>Save record</Button>,
      <Button onClick={() => {setRow({...row, edit: !row.edit})}}>Edit record</Button>
    ].map((button, index) => {
      if (row.edit && index == 2) return 
      if (!row.edit && index == 1) return 
      return <td key={`button${index}`}>{button}</td>
    })
  
    return buttons
  }

  const createCell = () => {
    const fieldNames = Object.keys(row.data)
  
    const cells = Object.values(row.data).map((cellValue, index) => {
      return (
        <Cell key={index} fieldName={fieldNames[index]} _id={row._id} value={cellValue} inputOnChangeHandler={inputOnChangeHandler} readOnly={!row.edit}/>
      )
    })
    return cells
  }

  return (
    <tr>
      {createButtons()}
      {createCell()}
    </tr>
  )
}

Cell.jsx

import React from 'react'
import Input from '../common/Input/Input'

export default function Cell({fieldName, _id, value, inputOnChangeHandler, readOnly}) {
  return (
    <td className='table__cell'>
      <Input fieldName={fieldName} _id={_id} value={value} onChange={inputOnChangeHandler} readOnly={readOnly}/>
    </td>
  )
}

Button.jsx

import React from 'react'

export default function Button({children, onClick}) {
  return (
    <button onClick={onClick}>{children}</button>
  )
}

Answer 1

[vertically-challenged]

Проблема решилась тем, что я в Row.jsx в функции createCell заменил обращение к состоянию row на обращение к пропу record