如何解决React卸载组件更新状态警告及allSlides.map不是函数报错

问题定位 #

你遇到的问题分为两个关联的独立触发点，需要分别排查：

• allSlides.map is not a function 报错的核心是 allSlides 被赋值了非数组类型的值，要么是接口返回值不符合预期，要么是你操作state的回调逻辑出错
• 加了isSubscribed标记依然出现组件卸载后更新state的警告，说明除了当前父组件的axios请求外，还有其他未清理的异步操作（大概率在子组件内）

解决方案 #

1. 修复数组类型报错，避免点击崩溃 #

• 接口返回赋值前先做类型校验，兜底为空数组，避免非数组值写入state：

useEffect(() => {
  let isSubscribed = true;
  axios.post(
    getAllSlidersUrl,
    { adminid: adminID, token: adminlogintoken }
  )
  .then((response) => {
    if(isSubscribed){
      // 新增类型判断
      const slideData = Array.isArray(response.data) ? response.data : [];
      setAllSlides(slideData);
    }
  })
  .catch((error) => {
    alert(error);
  })
  return () => {isSubscribed = false}
}, []);

• 检查你的 deleteSliderHandler 和 updatingSliderHandler 两个回调函数，确认所有修改allSlides的操作，最终写入state的都是数组类型，不要出现把对象、undefined、null赋值给allSlides的情况。
• 渲染时新增数组判断，避免极端情况崩溃：

{Array.isArray(allSlides) && 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>
))}

2. 彻底解决组件卸载更新警告 #

• 优先用AbortController直接取消未完成的axios请求，比isSubscribed标记更彻底，还能节省网络资源：

useEffect(() => {
  const abortController = new AbortController();
  axios.post(
    getAllSlidersUrl,
    { adminid: adminID, token: adminlogintoken },
    { signal: abortController.signal } // 绑定取消信号
  )
  .then((response) => {
    const slideData = Array.isArray(response.data) ? response.data : [];
    setAllSlides(slideData);
  })
  .catch((error) => {
    // 请求主动取消的情况不需要提示错误
    if (!axios.isCancel(error)) {
      alert(error);
    }
  })
  // 组件卸载时直接取消请求
  return () => abortController.abort();
}, []);

• 排查子组件SliderComponent的代码：如果子组件内部有定时器、接口请求、事件监听、全局订阅这类异步操作，必须在组件卸载的清理函数中做对应取消/移除操作，否则子组件卸载后异步逻辑触发state更新，依然会抛出该警告。

内容的提问来源于stack exchange，提问作者Daniel_Kamel