Javascript 输入电子邮件字段onchange未将字符串设置为state if last字段

这真的很奇怪，我将电子邮件输入设置为字符串状态，我可以在react-dev工具上看到它被发送，但是如果我尝试从另一个函数记录它，我会得到空字符串，问题是如果我更改输入的顺序，并且电子邮件不是最后一封，那么一切都会工作

import React, { useState, useEffect, useCallback, useContext } from 'react'
import { useDropzone } from 'react-dropzone'
import context from '../provider/context'
import axios from 'axios'

const File = () => {

  const { setStage, setProject, project, setUrls, urls, email, setEmail } = useContext(context)

  const onDrop = useCallback((acceptedFiles) => uploadFile(acceptedFiles), [project])

  const { getRootProps, isDragActive, getInputProps } = useDropzone({ onDrop })


  // Set project name
  const addProject = (e) => setProject(e.target.value)

  // Set email address
  const addEmail = (e) => setEmail(e.target.value)

  // I got another function then that logs the `email` state, 
  // but if I do it right after typing on the email input I get empty  string.
  // If I invert the order, and `project` comes after the email input 
  // then it displays the email string just fine.


 return (
    <>
      <ul className='list'>
        <li>
          <label className='label' htmlFor='upload'>
            Project's Name
          </label>
          <input
            id='upload'
            value={project}
            type='text'
            name='project'
            placeholder='e.g Great Project'
            onChange={addProject}
            autoFocus
          />
        </li>
        <li>
          <label className='label' htmlFor='email'>
            Your email address
          </label>
          <input
            id='email'
            type='email'
            name='email'
            value={email}
            placeholder='Email address to send notification to'
            onChange={addEmail}
          />
        </li>
      </ul>

      <div className='fileTitle' {...getRootProps()}>
          {isDragActive ? <p className='label'>Drop the file here ...</p> : handleResponse()}
          <div className='file'>
            <div id='drop-area' className={`drop-area ${isDragActive ? 'active' : ''}`}>
              <div className={`icon ${response ? response : ''}`}></div>
            </div>
            <input
              {...getInputProps()}
              className='inputfile'
              id='file'
              type='file'
              name='locations'
            />
          </div>
          <br />
          <em className='info'>
            * Don’t include any headers in the file, just your list of urls with{' '}
            <strong>no headers</strong>.
          </em>
        </div>
   </>
)}

export default File

做一个简单的onclick很好

const checkEmail = () => {
 console.log(email) // This works cause it takes it form the useContext
}

然后在html上

<button onClick={checkEmail}>Click here<button>

点击这里

最后，我需要将

email

作为数组依赖项添加到react drop zone useCallback，以便它可以注册在该状态下发生了更改

所以我改变了：

const onDrop = useCallback((acceptedFiles) => 
  uploadFile(acceptedFiles), [project])

到

这就是为什么，当我在添加电子邮件后更改项目字段时，它正在工作的原因

---

非常感谢帮助我找到问题所在的人。

“我得到了另一个函数”

我们应该如何在没有看到该函数的情况下进行调试？它有点复杂，它使用了useDropzone，好的，我正在更新问题尝试将该函数更改为一个不同的函数，该函数直接用于控制台日志，以查看该函数是否存在问题。听起来问题就出在这上面function@Nate是的，这是useDropzone一个简单的onclick按钮使其记录良好，然后请显示该函数的使用代码。问题显然就在这个功能中，没有人能在没有看到这个功能的情况下解决它。

const onDrop = useCallback((acceptedFiles) => 
  uploadFile(acceptedFiles), [project])

const onDrop = useCallback((acceptedFiles) => 
  uploadFile(acceptedFiles), [project, email])