title: TypeError: Cannot read properties of undefined (reading 'map'), and multiple API requests in React.js
body: <p>I know this map reading error has been asked <em>a lot</em> here before and I looked at several closed issues, but since their causes were different from mine I've opted to open a new topic. At the moment I'm facing 2 errors, so let me tackle each at a time.</p>
  <p><strong>What I want to accomplish:</strong>
  After submitting a search query, the &quot;Results&quot; component should be rendered and make a <code>GET</code> request to my back-end (which, in turn, will make a <code>GET</code> request to the external API and send back the results to React). Once it fetches the data it should store it in the <code>details</code> variable, which will be mapped and rendered in a child component.</p>
  <p><strong>First problem:</strong></p>
  <p>Despite a successful request is being made to my back-end and also to the external API - which I could check by using <code>console.log</code> -, it seems like the retrieved data isn't being stored inside the variable, resulting in an undefined array to be mapped. So, what am I doing wrong here? Is this happening because the component is trying to map the array before the <code>GET</code> request completes and executes the <code>setDetails(response.data)</code> even though it comes way below in the code?</p>
  <pre><code>function Results() {
    const location = useLocation();
    const history = useHistory();
    const [query, setQuery] = useState(location.state.search);
    const [details, setDetails] = useState([]);
  
    axios.get(&quot;http://localhost:5000/results/&quot; + query).then((response) =&gt; {
      setDetails(response.data);
      console.log(response.data);
    });
  
    const results = details.total_results;
    const pages = details.total_pages;
    const baseURL = &quot;https://image.tmdb.org/t/p/w154&quot;;
  
    return (
      &lt;Container&gt;
        &lt;Card sx={{ padding: 3, margin: 2 }}&gt;
          &lt;CardContent&gt;
            &lt;Grid container&gt;
              &lt;Grid item xs={12}&gt;
                &lt;Typography variant=&quot;h5&quot;&gt;Results&lt;/Typography&gt;
                &lt;Typography&gt;{results ? results : 0} results found&lt;/Typography&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12}&gt;
                &lt;List sx={{ mt: 5 }}&gt;
                  {details.results.map((result) =&gt; {
                    return (
                      &lt;ResultItem
                        key={result.id}
                        imgURL={baseURL + result.poster_path}
                        title={result.title}
                        year={result.release_date}
                        director=&quot;&quot;
                        synopsis={result.overview}
                      /&gt;
                    );
                  })}
                &lt;/List&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/CardContent&gt;
          &lt;Pagination
            count={pages}
            onChange={(event, page) =&gt; {
              history.push(&quot;/results&quot; + query + &quot;&amp;page=&quot; + page);
              setQuery(query + &quot;&amp;page=&quot; + page);
            }}
          /&gt;
        &lt;/Card&gt;
      &lt;/Container&gt;
    );
  }
  
  export default Results;
  </code></pre>
  <p><strong>Second problem:</strong></p>
  <p>I'm not sure exactly why, but the <code>GET</code> request is triggering <strong>two</strong> responses from the external API instead of just one. Both, front and back-end, are logging the retrieved data two times, and I suspect the multiple requests are coming from my front-end, causing the back-end to trigger multiple requests as well. And that is a huge step from a previous error when something in my code was triggering an infinite loop of requests.</p>
  <p>I'll probably have issues with the pagination later on as well, I guess, but that's another story.</p>