В функции addRecord я меняю данные на сервере и мне сразу же нужно получить и отобразить эти новые данные, но данные отрисовываются только после второго вызова данной функции, как это исправить? Почему так происходит?
import React, { useState, useEffect} from 'react'
import './App.scss'
import API from './API/api'
import Table from './modules/Table/Table'
import Button from './modules/common/Button/Button'
import mainConfig from './mainConfig'
const addRecord = (setRecords) => {
const newRecord = {data:{}}
for (let field of mainConfig.fields) {
newRecord.data[field] = ''
}
API.addRecord(newRecord).then(() => {
API.getData().then(records => {
setRecords(records)
})
})
}
function App() {
const [records, setRecords] = useState({})
const [modifiedFields, setModifiedFields] = useState([])
useEffect(() => {
API.getData().then(records => {
setRecords(records)
})
}, [])
return (
<div>
{records !== undefined && <Table records={records} setRecords={setRecords} modifiedFields={modifiedFields} setModifiedFields={setModifiedFields}/>}
<Button name={'Add record'} onClick={() => addRecord(setRecords)}/>
</div>
)
}
export default App
