在React中调用调度功能

问题描述

我不知道在哪里调用dispatch（setAlert（））函数。我在axios.patch请求后想要它，但目前无法正常工作

  let url = `.....................`;
  const handleSubmit = (e) => {
    e.preventDefault(); 
    axios
      .patch(url,form_data,{
        headers: {
          Authorization: `JWT ${localStorage.getItem("access")}`,"content-type": "application/json",},})
      dispatch(setAlert('Data changed successfully.','success'));
      .then(() => axios.get(url))
      .then((res) => {
        console.log(res.data);
        updateFormData({
          ...formData
        })
      })
      .catch((err) => console.log(err));
    };  

解决方法

在dispatch通话之后立即在then内添加patch通话：

const handleSubmit = (e) => {
    e.preventDefault(); 
    axios
      .patch(url,form_data,{
        headers: {
          Authorization: `JWT ${localStorage.getItem("access")}`,"content-type": "application/json",},})
      .then(() => {
         dispatch(setAlert('Data changed successfully.','success'));
         axios.get(url));
       }
      .then((res) => {
        console.log(res.data);
        updateFormData({
          ...formData
        })
      })
      .catch((err) => console.log(err));
    };  

编辑： 确保使用类组件连接组件，或者使用功能组件导入useDispatch钩子，例如：

import { useDispatch } from 'react-redux'

function SomeComponent() {
    const dispatch = useDispatch();
    ...
    // your code place

}

,

您可以使用async / wait，然后等到补丁调用完成。

  const handleSubmit = async (e) => {
    e.preventDefault(); 
    await axios
      .patch(url,})
      dispatch(setAlert('Data changed successfully.','success'));
      .then(() => axios.get(url))
      .then((res) => {
        console.log(res.data);
        updateFormData({
          ...formData
        })
      })
      .catch((err) => console.log(err));
    };