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

EN

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

 // Upload file
  const uploadFile = async (file) => {
    console.log(email)
    const formData = new FormData()
    formData.append('urls', file[0])

    try {
      const options = {
        headers: { 'content-type': 'multipart/form-data' },
        params: { project, email }
      }

      const res = await axios.post('/api/upload/', formData, options)

      setUrls(res.data.number)
      setResponse('success')

      setTimeout(() => setStage('process'), 1200)
    } catch (err) {
      setResponse(err.response.data)
    }
  }

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

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