2

我有以下代码：

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

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

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 应用程序都不会中断并且一切正常，但大多数情况下，如果我按下按钮，我会收到警告，然后是错误。

4

1 回答 1

0

检查响应数据类型是否为数组类型，因为错误表明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;}
}, []
);

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

于 2021-11-30T14:47:00.333 回答