Question

首先，如果有重复的问题，请原谅我。我已经解决了所有建议的类似问题，并且在Google上进行了一些自己的搜索。我敢于反抗地看到其他人以前曾提出过这个问题，但是大多数答案都涵盖了钩子之前的Class组件……例如在设置状态时添加第二个arg。

我见过其他人建议使用useEffect，但是我不能在handle change事件中使用它，并且尝试在函数外部使用它，无济于事。

我的问题...

我正在弄弄MongoDB。我正在尝试这样做，以便当我在“项目代码”框中输入一个sku时，如果它在数据库中找到一个匹配项，它将填写另外两个框，然后我可以对其进行编辑和更新/重新添加回数据库。

一切正常，除了输入落后一步，因此框仅在以后一步正确填充（按空格或Backspace或添加另一个字母等）

有什么主意我想解决的吗？下面的代码...

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

反应状态落后一步输入

0 个答案: