title: javascript - Cannot update a component while rendering a different component warning
body: <p>I am getting the following warning:</p>
  <p><strong>Warning: Cannot update a component (Container) while rendering a different component (Form). To locate the bad setState() call inside Form</strong></p>
  <p>When I delete dispatch in if in form.js, the error does not appear, but I need to dispatch.</p>
  <p>How can I solve this problem in such a situation? There have been people who have experienced similar errors, but I couldn't get a share of myself from there, sorry I'm a beginner.</p>
  <p><a href="https://i.stack.imgur.com/B1k83.png" rel="nofollow noreferrer">warning picture</a></p>
  <p>Form.js;</p>
  <pre><code>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(&quot;You cannot enter a value less than one!&quot;)
          dispatch(changeParagraph(1))
      }
  
      return (
          &lt;div className=&quot;form&quot;&gt;
              &lt;div className=&quot;form__group&quot;&gt;
                  &lt;span className=&quot;form__group-text&quot;&gt;Paragraphs&lt;/span&gt;
                  &lt;input className=&quot;form__group-input&quot; type=&quot;number&quot; value={count} onInput={e =&gt; dispatch(changeParagraph(e.target.value))}/&gt;
              &lt;/div&gt;
              &lt;div className=&quot;form__group&quot;&gt;
                  &lt;span className=&quot;form__group-text&quot;&gt;Include HTML&lt;/span&gt;
                  &lt;select className=&quot;form__group-input&quot; name=&quot;html&quot; onChange={e =&gt; dispatch(changeIncludeHTML(e.target.value))}&gt;
                      &lt;option value=&quot;no&quot;&gt;No&lt;/option&gt;
                      &lt;option value=&quot;yes&quot;&gt;Yes&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default Form
  </code></pre>
  <p>Output.js;</p>
  <pre><code>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-meat&amp;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=&quot;container&quot;&gt;
              {isLoading &amp;&amp; &lt;span&gt;Loading..&lt;/span&gt;}
              {data}
              &lt;/div&gt;
          &lt;/&gt;
      )
  }
  
  export default Container
  </code></pre>