尝试修复：无法对未安装的组件执行 React 状态更新

Question

我有以下代码：

const getAllSlidersUrl = "a url";
const adminID = "an admin id";
const adminlogintoken="a token";

const SliderContainer = () => {
    const [allSlides, setAllSlides] = useState([]);

    useEffect(
        () => {
            axios.post(
                getAllSlidersUrl,
                {
                    adminid: adminID,
                    token: adminlogintoken
                }
            )
                .then(
                    (response) => {
                        setAllSlides(response.data);
                    }
                )
                .catch(
                    (error) => {
                        alert(error);
                    }
                )

        }, []
    );

    return (
        //I have a button here
       //when I press button it executes the following:
       {
           allSlides.map(
                 item =>
                    <div key={item.slider_id} style={{ paddingTop: "10px", paddingBottom: "10px" }}>
                         <SliderComponent
                              adminId={adminID}
                              adminLoginToken={adminlogintoken}
                              sliderID={item.slider_id}
                              sliderImage={item.slider_image}
                              sliderEnText={item.slider_en_text}
                              sliderArText={item.slider_ar_text}
                              sliderEnButtonText={item.slider_en_button_text}
                              sliderArButtonText={item.slider_ar_button_text}
                              sliderEnButtonLink={item.slider_en_button_link}
                              sliderArButtonLink={item.slider_ar_button_link}
                              deleteSliderOnClick={deleteSliderHandler}
                              updateSliderToAllSlides={updatingSliderHandler}
                              />
                     </div>
                 )
       } 
   );
}

当我登录页面并按 F12（给我检查选项卡）时，有时一切正常，我没有收到任何警告，但大多数时候我收到以下警告：

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

每当出现此警告时，我按下按钮，应用程序就会中断，并且出现错误：allSlides.map is not a function

我尝试在 useEffect 挂钩的末尾添加 return () => {}，我还尝试将 useEffect 更改为以下内容：

useEffect(
        () => {
            let isSubscribed = true;
            axios.post(
                getAllSlidersUrl,
                {
                    adminid: adminID,
                    token: adminlogintoken
                }
             )
             .then(
                (response) => {
                    if(isSubscribed){
                        setAllSlides(response.data);
                     }
                        
                }
             )
             .catch(
                 (error) => {
                     alert(error);
              }
           )
           return () => {isSubscribed = false}
    }, []
);

但是在我尝试解决错误的两种情况下，它都没有解决。

请注意，无论出于何种原因（在所有 3 种情况下），有时 Web 应用程序不会中断并且一切正常，但大多数时候我确实会收到警告，然后在按下按钮时出现错误。

Answer 1

检查响应数据类型是否为数组类型，因为错误指出 map is not a function 表示 allSlides 不是数组。

关于警告

尝试像这样使用 ref 取消抓取：

const cancelFetch = React.useRef(false);


useEffect(
    () => {
        
        axios.post(
            getAllSlidersUrl,
            {
                adminid: adminID,
                token: adminlogintoken
            }
         )
         .then(
            (response) => {
                if(cancelFetch.current){

                   return;
                    
                 }
                 setAllSlides(response.data);
            }
         )
         .catch(
             (error) => {
                 alert(error);
          }
       )
       return () => {cancelFetch.current = true;}
}, []
);

更好的取消方法是使用中止控制器，但这也可以。如果警告仍然存在，则可能另一个组件（父组件）正在卸载。

尝试修复：无法对未安装的组件执行 React 状态更新

Trying to fix: Can't perform a React state update on an unmounted component

reactjs

react-hooks

use-effect

react-component-unmount