如何防止组件在反应中重新渲染？

Question

The content component and it takes the API as a argument from another component. But when it takes a new input and the API updates it re-renders(i think twise) and the result array is empty. That is the problem. Here is the code.

    import React from 'react';
import  { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';

const Content=(api)=>{

  const [cities, setItems] = useState([]);

  const API=api;
  console.log(API);

  
  useEffect(() => {
  //  setItems([]);  //clearing cities array.deleting previuos data from the array
    fetch(API)
      .then(res => res.json(console.log(res)))
      .then(
        (result) => {
          console.log(cities)
          setItems(cities => cities.concat(result));
          
        },
      )
  },[API]);

  console.log(cities)

    return (
        <ul>
        {cities.map(citi => (
          <li key={citi.city.id}>
            The city is is{citi.city.id} 
            The city name is{citi.city.name}
            The temparature is {citi.list[0].main.temp}
          </li>
        ))}
      </ul>
  
      
    )
  }


export default Content;

The first log is returning an empty array. But the second log is returning the array with correct results Here is the console output

As you can see it renders twice and the final array is an empty one. So my issue is that the final result array is an empty array even id the api is fetching data. Because of that this component is not returning anything. How to fix that. The output is showing that the array is empty

please don't downvote.Just leave a comment if this needs an improvement

Answer 1

I am assuming that the API you have mentioned here is props and it should be props.api. The answer is using the api in the Content component after destructuring from props

import React from 'react';
import  { useState,useEffect } from 'react';
import ReactDOM from 'react-dom';

const Content=({api})=>{

  const [cities, setItems] = useState([]);

  useEffect(() => {
    if(api){
        fetch(api)
           .then(res => res.json())
           .then(result => {
                // add some guarding condition here for result
                let updatedCities = cities.concat(result);
                setItems(updatedCities);
           })
    }
  },[api]);

  console.log(cities)

    return (
        <ul>
        {cities.map(citi => (
          <li key={citi.city.id}>
            The city is is{citi.city.id} 
            The city name is{citi.city.name}
            The temparature is {citi.list[0].main.temp}
          </li>
        ))}
      </ul>     
    )
  }
export default Content;

This would only re-render when the API has changed.