Блог

Я получаю следующее предупреждение:

Предупреждение: Не удается обновить компонент (контейнер) при отображении другого компонента (формы). Чтобы найти неправильный вызов setState() внутри формы

Когда я удаляю отправку в, если в form.js, ошибка не появляется, но мне нужно отправить.

Как я могу решить эту проблему в такой ситуации? Были люди, которые сталкивались с подобными ошибками, но я не мог получить долю себя оттуда, извините, я новичок.

предупреждающее изображение

Form.js;

 import { useSelector, useDispatch } from 'react-redux' import { changeParagraph, changeIncludeHTML, value } from '../redux/paragraphSlice'  function Form() {  const count = useSelector(value);  const dispatch = useDispatch();   if(count lt; 1) {  window.alert("You cannot enter a value less than one!")  dispatch(changeParagraph(1))  }   return (  lt;div className="form"gt;  lt;div className="form__group"gt;  lt;span className="form__group-text"gt;Paragraphslt;/spangt;  lt;input className="form__group-input" type="number" value={count} onInput={e =gt; dispatch(changeParagraph(e.target.value))}/gt;  lt;/divgt;  lt;div className="form__group"gt;  lt;span className="form__group-text"gt;Include HTMLlt;/spangt;  lt;select className="form__group-input" name="html" onChange={e =gt; dispatch(changeIncludeHTML(e.target.value))}gt;  lt;option value="no"gt;Nolt;/optiongt;  lt;option value="yes"gt;Yeslt;/optiongt;  lt;/selectgt;  lt;/divgt;  lt;/divgt;  ) }  export default Form  

Output.js;

 import Header from './Header' import Form from './Form' import axios from 'axios'; import { useState, useEffect } from 'react' import { useSelector } from 'react-redux' import { includeHTML, value } from '../redux/paragraphSlice'  function Container() {  const count = useSelector(value);  const include = useSelector(includeHTML);  const [data, setData] = useState([]);  const [isLoading, setIsLoading] = useState(true);   useEffect(() =gt; {  let format;  const fetchData = async () =gt; {  if(include === 'no')   format = 'text';  else   format = 'html';   const response = await axios.get(`https://baconipsum.com/api/?type=all-meatamp;paras=${count}amp;format=${format}`)  setData(response.data);  setIsLoading(false)  }  fetchData();  }, [count, include])    return (  lt;gt;  lt;Header/gt;  lt;Form/gt;  lt;div className="container"gt;  {isLoading amp;amp; lt;spangt;Loading..lt;/spangt;}  {data}  lt;/divgt;  lt;/gt;  ) }  export default Container