Reactjs 错误：我的子组件的useState值没有立即更改，您需要按两次submit按钮

我有来自子组件的数据，需要传递给父组件。但我的问题是我需要按两次提交按钮。我尝试使用箭头函数，因为我知道这将立即更新状态，但不起作用。我尝试在useffect中记录console.log状态，我看到了更改。但是当提交状态时，数据不会出现

子组件

const UploadFile = ({
  uploadeditemListFile,
  callChildFunction,
}) => {
  const [list, setList] = useState(isList);
  const [isOpen, setIsOpen] = useState(false);
  const [itemListFile, setItemListFile] = useState([]);

    const handleOnFileUpload = (e) => {
    const formData = new FormData();
    for (let i = 0; i < itemListFile.length; i++) {
      formData.append('uploadCollection', itemListFile[i]);
    }
    axios({
      method: 'POST',
      url: `http://localhost:5000/api/seller/upload/${restaurantName}/${folderName}`,
      data: formData,
      headers: {
        'Content-type': 'application/json',
      },
    }).then((res) => {
      uploadeditemListFile(res.data);
    });
  };


  useEffect(() => {
    handleOnFileUpload();
  }, [callChildFunction]);

  return (
    <>
HTML
    </>
  );
};

const RegisterSellerPage = ({ history }) => {
  const [accountInfo, setAccountInfo] = useState({
    restaurantName: '',
    businessType: '',
    costForOne: '',
    fullname: '',
    password: '',
    confirmPassword: '',
    email: '',
    mobileno: '',
    address: JSON.parse(localStorage.getItem('userCurrentLocation')) || '',
    uploads: [],
  });
  const [isOpen, setIsOpen] = useState(false);
  const [callChildFunction, setCallChildFunction] = useState(false);

  const dispatch = useDispatch();


  const handleOnSubmit = async (e) => {
    e.preventDefault();
    setCallChildFunction(true);
    dispatch(registerSellerAccount(accountInfo)); 
  };

  useEffect(() => {
console.log(accountInfo.uploads) 
  }, [accountInfo.imgUrl, history]);

  return (
    <FormContainer>
      <form noValidate onSubmit={handleOnSubmit} className='w-10/12 mx-auto'>
        <div className='form-group w-full relative'>
          <UploadFile
            restaurantName={accountInfo.restaurantName}
            folderName='menu'
            name='uploadCollection'
            accept='image/*'
            multiple={true}
            caption='Select a file'
            isList={true}
            uploadeditemListFile={(uploadeditemListFile) =>
              setAccountInfo({ ...accountInfo, uploads: uploadeditemListFile }) <-- props
            }
            callChildFunction={callChildFunction}
          />
        </div>
      </form>
    </FormContainer>
  );
};

const上传文件=({
上传EditEmListFile，
callChildFunction，
}) => {
const[list，setList]=useState（isList）；
常量[isOpen，setIsOpen]=useState（false）；
const[itemListFile，setItemListFile]=useState（[]）；
const handleOnFileUpload=（e）=>{
const formData=new formData（）；
for（设i=0；i{
上传编辑列表文件（res.data）；
});
};
useffect（（）=>{
handleOnFileUpload（）；
}，[callChildFunction]）；
返回(
HTML
);
};

父组件

const UploadFile = ({
  uploadeditemListFile,
  callChildFunction,
}) => {
  const [list, setList] = useState(isList);
  const [isOpen, setIsOpen] = useState(false);
  const [itemListFile, setItemListFile] = useState([]);

    const handleOnFileUpload = (e) => {
    const formData = new FormData();
    for (let i = 0; i < itemListFile.length; i++) {
      formData.append('uploadCollection', itemListFile[i]);
    }
    axios({
      method: 'POST',
      url: `http://localhost:5000/api/seller/upload/${restaurantName}/${folderName}`,
      data: formData,
      headers: {
        'Content-type': 'application/json',
      },
    }).then((res) => {
      uploadeditemListFile(res.data);
    });
  };


  useEffect(() => {
    handleOnFileUpload();
  }, [callChildFunction]);

  return (
    <>
HTML
    </>
  );
};

const RegisterSellerPage = ({ history }) => {
  const [accountInfo, setAccountInfo] = useState({
    restaurantName: '',
    businessType: '',
    costForOne: '',
    fullname: '',
    password: '',
    confirmPassword: '',
    email: '',
    mobileno: '',
    address: JSON.parse(localStorage.getItem('userCurrentLocation')) || '',
    uploads: [],
  });
  const [isOpen, setIsOpen] = useState(false);
  const [callChildFunction, setCallChildFunction] = useState(false);

  const dispatch = useDispatch();


  const handleOnSubmit = async (e) => {
    e.preventDefault();
    setCallChildFunction(true);
    dispatch(registerSellerAccount(accountInfo)); 
  };

  useEffect(() => {
console.log(accountInfo.uploads) 
  }, [accountInfo.imgUrl, history]);

  return (
    <FormContainer>
      <form noValidate onSubmit={handleOnSubmit} className='w-10/12 mx-auto'>
        <div className='form-group w-full relative'>
          <UploadFile
            restaurantName={accountInfo.restaurantName}
            folderName='menu'
            name='uploadCollection'
            accept='image/*'
            multiple={true}
            caption='Select a file'
            isList={true}
            uploadeditemListFile={(uploadeditemListFile) =>
              setAccountInfo({ ...accountInfo, uploads: uploadeditemListFile }) <-- props
            }
            callChildFunction={callChildFunction}
          />
        </div>
      </form>
    </FormContainer>
  );
};

const RegisterSellerPage=（{history}）=>{
const[accountInfo，setAccountInfo]=useState({
餐厅名称：“”，
业务类型：“”，
成本为：''，
全名：“”，
密码：“”，
确认密码：“”，
电子邮件：“”，
美孚利诺：“，
地址：JSON.parse（localStorage.getItem（'userCurrentLocation'））| |'，
上载：[]，
});
常量[isOpen，setIsOpen]=useState（false）；
const[callChildFunction，setCallChildFunction]=useState（false）；
const dispatch=usedpatch（）；
const handleOnSubmit=async（e）=>{
e、 预防默认值（）；
setCallChildFunction（true）；
派遣（登记员Elleraccount（accountInfo））；
};
useffect（（）=>{
console.log（accountInfo.uploads）
}，[accountInfo.imgUrl，history]）；
返回(
setAccountInfo（{…accountInfo，上载：uploadeditemListFile}）
);
};

您正在混合异步等待和承诺，这可能会导致您的问题。它不明显，但wait总是对其等待的语句返回的最终值进行操作。这意味着您实际上是在对的结果使用wait，而不是axios调用。如果axios调用引发异常，这可能很重要

const res = await axios({
        method: 'POST',
        url: `http://localhost:5000/api/seller/upload/${restaurantName}/${folderName}`,
        data: formData,
        headers: {
          'Content-type': 'application/json',
        },
      });
uploadeditemListFile(res.data);

---

先生，.then的结果不是未定义的，我尝试了你的解决方案，但什么都没有发生。啊，是的，我把自己弄糊涂了，因为。然后显然返回了一个承诺。你仍然不应该把两者混为一谈。注意，我已经修改了代码，但问题仍然是一样的？哈哈，你已经用一种疯狂的方式构建了东西。您不应该通过更改组件属性来调用子组件函数。你有没有调试过任何东西，甚至弄清楚handleOnFileUpload是否像你所说的那样只调用一次？