将状态设置在Axios函数调用的内部，然后在useffect Hook中调用函数

Question

我正在使用反应功能组件。 我将状态设置在Axios调用的内部，然后在USEFFECT挂钩中调用该函数。

这是我的功能：

import { useDispatch } from “react-redux”;

functon ABCComponent({ navigation }){

    const dispatch = useDispatch();
   
    const testPostID = "1234567891011";
    
    const [post, setPost] = useState("");

     const getPostById = async(postID)=>{
        await axios.get(`http://localhost:5000/posts/post/${postID}`)
            .then((response) =>{
                dispatch(setLoading(true));
                dispatch(setSuccess(true));
                dispatch(setLoading(false));
                response.data.message.map((post, index) =>{
            
                    setPost(post); // I think it's complaining about this line
                });
            }).catch((error) =>{
                console.log("err: ", error);
                dispatch(setLoading(true));
                dispatch(setSuccess(false));
                dispatch(setLoading(false));
                dispatch(setMessage(`${error}`));
            });
    };

    useEffect(() =>{
        getPostById(testPostID);
    }, []);
    
}

我收到以下错误：

警告：无法在未填充组件上执行React状态更新。这是一个无操作，但表示您的应用程序中的内存泄漏。要修复，请在％s。％s中取消所有订阅和异步任务，使用效率清理功能， 在abccomponent。

我尝试的是： 我尝试删除异步/等待，希望它能解决问题，但事实并非如此。

解决此问题的最佳方法是什么？

Answer 1

如警告所述，当您尝试更新未填充组件上的状态时，可能会发生内存泄漏。为了解决此问题，您应该包括一些iSMounted标志，以便在更新状态之前检查组件是否仍在安装。另外，还有其他一些建议我会给您 - 不要使用异步/等待。然后，您应该仅使用这两种方法中的一种（我的建议是async/等待）。

您应该重写类似的内容：

const isMounted = useRef(true);
const testPostID = "1234567891011";

const [post, setPost] = useState("");

const getPostById = async(postID)=>{
      try {
        dispatch(setLoading(true));

        const response = await axios.get(`http://localhost:5000/posts/post/${postID}`)
        
        if(isMounted.current){
            dispatch(setSuccess(true));
            dispatch(setLoading(false));
            response.data.message.map((post, index) =>{
                 setPost(post); // This part is unclear, why overriding state, and why in .map???
            });
         }
       } catch(err) {
         console.log("err: ", error);
         if(isMounted.current) {              
           dispatch(setLoading(true));
           dispatch(setSuccess(false));
           dispatch(setLoading(false));
           dispatch(setMessage(`${error}`));
         }
       }
  };

useEffect(() =>{
    getPostById(testPostID);

   return () => {
     isMounted.current = false;
   }
}, []);

还有一个不清楚的部分，您要更新状态，为什么使用.map以及为什么在每次迭代中覆盖状态？