Javascript 如何防止组件在react中重新呈现？

内容组件，它将API作为另一个组件的参数。但是当它接受一个新的输入并且API更新时，它会重新呈现（我认为是twise），结果数组是空的。这就是问题所在。 这是代码

    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;

从“React”导入React；
从“react”导入{useState，useEffect}；
从“react dom”导入react dom；
常量内容=（api）=>{
const[cities，setItems]=useState（[]）；
常数API=API；
控制台日志（API）；
useffect（（）=>{
//setItems（[]）；//正在清除城市数组。正在从数组中删除以前的数据
获取（API）
.then（res=>res.json（console.log（res）））
.那么(
（结果）=>{
console.log（城市）
setItems（cities=>cities.concat（result））；
},
)
}[API]；
console.log（城市）
返回(

{cities.map（花旗=>(

城市是{citi.city.id}
城市名称为{citi.city.name}
温度为{citi.list[0].main.temp}

))}

)
}
导出默认内容；

第一个日志返回一个空数组。 但是第二个日志返回的数组结果是正确的 这是控制台

正如您所看到的，它渲染了两次，最终的数组是空的。所以我的问题是，最终结果数组是一个空数组，即使api正在获取数据。因此，此组件不会返回任何内容。如何解决这个问题。输出显示数组为空

---

请不要否决。如果这需要改进，请留下评论。

我假设您在这里提到的API是props，应该是props.API。答案是在从props解构后在内容组件中使用api

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;

从“React”导入React；
从“react”导入{useState，useEffect}；
从“react dom”导入react dom；
常量内容=（{api}）=>{
const[cities，setItems]=useState（[]）；
useffect（（）=>{
如果（api）{
获取（api）
.then（res=>res.json（））
。然后（结果=>{
//在这里为结果添加一些保护条件
让updatedCities=cities.concat（结果）；
设置项目（更新的城市）；
})
}
}[api]；
console.log（城市）
返回(

{cities.map（花旗=>(

城市是{citi.city.id}
城市名称为{citi.city.name}
温度为{citi.list[0].main.temp}

))}

)
}
导出默认内容；

---

这只会在API更改后重新呈现。

“正如您所看到的”不，我们不能，这不是一个问题，因此您需要修复它。另外，为什么不使用

setItems（cities.concat（result））

？

setItems

函数已经用您传入的任何内容更新了

cities

，因为

useState

钩子就是这样工作的，为什么要使用箭头函数？@gmoniva，问题是最后一个数组是空的。所以组件没有返回任何内容。我希望最后的数组不为空。我尝试了这个，但没有成功。