发布数据时重新加载 useEffect 函数：reactJS

Question

我有这个 useEffect 它有一个 get 函数和一个名为 sentchat 的函数，它有一个 axios.post 方法来发布一些数据我通过 post 方法发布的数据是在 useffect 方法 axios get 中获取的，但我必须重新加载页面才能看到发布的数据我希望它自动发生

 function sentchat(e) {
    e.preventDefault();

    const config = {
      headers: {
        Authorization: `token ` + localStorage.getItem("token"),
      },
    };
    const data = { receiver: props.id, message: inputField };
    axios
      .post("messages/send-message/", data, config)
      .then((res) => {
        console.log(res.receiverDetails);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  useEffect(() => {
    const config = {
      headers: {
        Authorization: `token ` + localStorage.getItem("token"),
      },
    };

    axios
      .get("messages/get-all-messages/?receiver=" + props.id, config)
      .then((res) => {
        console.log(res.receiverDetails);
        setdata(res.data.receiverDetails);
        setMessage(res.data.messages);
      });
  }, [props.id]);

Answer 1

更新答案。

添加一个引用（我稍后会解释原因）

    const mountedRef = useRef(true)

把你的 useEffect 改成这个

      useEffect(() => {
        if(mountedRef.current){
          getData();
        }
        return function cleanup() {
          mountedRef.current = false
        };
      }, [getData]);

我们将添加一个新的回调

    const getData = useCallback(async () => {
    const config = {
      headers: {
        Authorization: `token ` + localStorage.getItem("token"),
      },
    };
        const res = await axios.get("messages/get-all-messages/?receiver=" + props.id, config)
        //Also adding to check we have a response otherwise you will be setting the state of undefined which will crash.
        if(res.status === 200){
         //We use the ref here to confirm that this component is still mounted otherwise you will get leak errors.
          if(mountedRef.current){
             console.log(res.receiverDetails);
             setdata(res.data.receiverDetails);
             setMessage(res.data.messages);
          }
        }
      }, [])

现在您可以在需要时调用 getData()。

所以只需将此添加到您的帖子回复中

 function sentchat(e) {
    e.preventDefault();

    const config = {
      headers: {
        Authorization: `token ` + localStorage.getItem("token"),
      },
    };
    const data = { receiver: props.id, message: inputField };
    axios
      .post("messages/send-message/", data, config)
      .then((res) => {
        console.log(res.receiverDetails);
        //ADD LINE HERE
        getData()
      })
      .catch((error) => {
        console.log(error);
      });
  }