Блог

У меня есть следующий код:

 const getAllSlidersUrl = "a url"; const adminID = "an admin id"; const adminlogintoken="a token";  const SliderContainer = () =gt; {  const [allSlides, setAllSlides] = useState([]);   useEffect(  () =gt; {  axios.post(  getAllSlidersUrl,  {  adminid: adminID,  token: adminlogintoken  }  )  .then(  (response) =gt; {  setAllSlides(response.data);  }  )  .catch(  (error) =gt; {  alert(error);  }  )   }, []  );   return (  //I have a button here  //when I press button it executes the following:  {  allSlides.map(  item =gt;  lt;div key={item.slider_id} style={{ paddingTop: "10px", paddingBottom: "10px" }}gt;  lt;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}  /gt;  lt;/divgt;  )  }   ); }   

Когда я захожу на страницу и нажимаю 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 () =gt; {} в конце useEffect крючка, я также попытался изменить useEffect на следующее:

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

Но в обоих случаях, когда я пытался устранить ошибку, она ее не устраняет.

Обратите внимание, что по какой-либо причине (во всех 3 случаях) иногда веб-приложение не ломается, и все работает нормально, но в большинстве случаев я получаю предупреждение, а затем ошибку, если нажимаю кнопку.

Проверьте тип данных ответа, относится ли он к типу массива или нет, поскольку в ошибке указано, что map is not a function это означает allSlides , что это не массив.

О предупреждении

попробуйте использовать ссылку, чтобы отменить выборку, как это:

 const cancelFetch = React.useRef(false);   useEffect(  () =gt; {    axios.post(  getAllSlidersUrl,  {  adminid: adminID,  token: adminlogintoken  }  )  .then(  (response) =gt; {  if(cancelFetch.current){   return;    }  setAllSlides(response.data);  }  )  .catch(  (error) =gt; {  alert(error);  }  )  return () =gt; {cancelFetch.current = true;} }, [] );  

Лучший способ отменить — использовать контроллер прерывания, но это тоже можно сделать. Если предупреждение все еще там, то, возможно, другой компонент (родительский) отключается.