Реагировать состояние на шаг позади для ввода

Question

Во-первых, пожалуйста, прости меня, если есть повторяющийся вопрос. Я просмотрел все предложенные аналогичные вопросы, а также провел несколько собственных поисков в Google. Я вызывающе вижу, что другие люди поднимали эту проблему раньше, но большинство ответов касаются компонентов класса перед хуками ... например, добавление 2-го аргумента при установке состояния.

Я видел других, предлагающих useEffect, но я могу Не использую это в событии изменения дескриптора, и я пытался использовать его вне функции, но безрезультатно.

Моя проблема ...

Я возиться с MongoDB. Я пытаюсь сделать так, чтобы при вводе sku в поле «Код товара», если он находит совпадение в базе данных, он заполняет два других поля, которые затем я могу редактировать и обновлять / вставлять обратно в БД.

Все работает, кроме ввода на один шаг позади, поэтому поля заполняются правильно только на шаг позже (нажатие пробела или возврата или добавление другой буквы и т. Д. c.)

Любые идеи не могу это исправить? Код ниже ...

import React, { useState, useEffect } from 'react'

const App = () => {
  const [apiRepsonse, setApiResponse] = useState([])
  const [document,setDocument] = useState([])
  const [read,setRead] = useState([])
  const findDocument = {itemCode: document.itemCode}

  let itemCodeLength = document.itemCode === undefined ? 0 : document.itemCode.length

  const handleChange =  (event) => {
    let name = event.target.name
    let value = event.target.value
    setDocument({...read[0],[name]: value })
  }

  useEffect(() => {
    itemCodeLength > 5 && readDoc('itemCode',document.itemCode)
  },[itemCodeLength])

  const updateDoc = async () => {

    try {
      const res = await fetch(`http://localhost:1000/api`, {
        method: 'PUT',
        mode: 'cors',
        body: JSON.stringify({
          collection: 'ItemFile',
          findDocument: findDocument,
          document: document
        }),
        headers: {
          'content-type': 'application/json',
          credentials: 'include'
        }
      })
      res.json().then(res => {
        setApiResponse(res)
        console.log(apiRepsonse)
      })
    } catch (error) {
      console.log(error)
    }
  }

  const readDoc = async (key, value) => {

    try {
      const res = await fetch(`http://localhost:1000/api/`, {
        method: 'POST',
        mode: 'cors',
        body: JSON.stringify({
          collection: 'ItemFile',
          findBy: key === undefined ? {} : {[key]: value}
        }),
        headers: {
          'content-type': 'application/json',
          credentials: 'include'
        }
      })
      res.json().then(res => {
        setRead(res)
      })
    } catch (error) {
      console.log(error)
    }
  }

  const insertAndRefresh = async() => {
    await updateDoc()
    readDoc('itemCode',document.itemCode)
  }

  return (
    <div>
        <div>
          <div>Search Item Code</div>
          <div>
            <input name='itemCode' value={document.itemCode || ''} onChange={handleChange} />
          </div>
        </div>
        <div>
          <div>Description</div>
          <div >
            <input name='description' value={document.description || ''} onChange={handleChange} />
          </div>
        </div>
        <div>
          <div>Product Group</div>
          <div>
            <input name='productGroup' value={document.productGroup || ''} onChange={handleChange} />
          </div>
        </div>
        <div>
          <div>
            <button onClick={document.length !== 0 ? insertAndRefresh : undefined}>Upsert</button>
          </div>
        </div>
  </div>
  )
}

export default App