State обновляется, но рендеринга не происходит, как это исправить?

Question

[vertically-challenged]

В функции 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

Comments

[GlazOtca]

вы нарушаете все принципы реакт-приложения и еще удивляетесь почему не так работает?

[vertically-challenged]

GlazOtca, а что именно я нарушаю?

[GlazOtca]

Читайте внимательно Правила хуков

[Alexandroppolus]

GlazOtca, какие правила хуков тут нарушены?

[GlazOtca]

Alexandroppolus, Вызывайте хуки только из React-функций
const addRecord - внешняя функция. Сайд эффекты должны вызываться в хуке useEffect, в котором должны быть зависимости от обновляемых переменных.

[vertically-challenged]

GlazOtca, вот теперь действительно понятно

[Alexandroppolus]

GlazOtca, здесь есть всего 3 вызова хука - два useState(..) и один useEffect.(..) Они все безусловно вызываются на верхнем уровне компонента App.
Поинт про внешнюю функцию не понял.

[GlazOtca]

Alexandroppolus, Поздравляю вас, вы пробили дно и попали в мой личный ЧС. Удачи вам и успехов, и да минует пользователя код написанный вами.

Answer 1

[deantek]

ты вызываешь хук за пределами компонента App, конечно он не будет обновляться, хуки нельзя так использовать

Answer 2

[Alexandroppolus]

API.addRecord(newRecord) работает асинхронно. Надо дождаться его завершения, и только потом делать запрос API.getData()

Comments

[vertically-challenged]

Сделал так, проблема осталась

API.addRecord(newRecord).then(() => {
    API.getData().then(records => {
      setRecords(records)
    })
  })

[GlazOtca]

Один слепой ведет другого?