获取所有数据后React js刷新功能组件答案

【问题标题】：React js refresh functional component after all data fetched获取所有数据后React js刷新功能组件
【发布时间】：2020-04-16 11:53:11
【问题描述】：

我正在使用一个反应功能组件，我正在 for 循环中获取外部数据。问题是组件无限刷新。下面是我想要做的 -

const SongGrid = (props: any) => {
 const [songData, setSongData] = useState(props.location.state.items);
 useEffect(() => {
    const fetchData = (data: any) => {
     CommonService.postApiExecutor('getdata', {data.id})
     .then((response) => { 
        element.extProp1 = response.data.one;
        setSongData(
        songData.map((item: any) =>
          item.song_id === song.song_id
            ? { ...item, extProp1 : extProp1 }
            : item,
        ),
      );
      })
    }
    songDataObj.forEach((element: any) => {
      fetchData(element)
    })
 },[songData])
 return (
  <div>
   <table>
     <thead><th>Song Name</th><th>Ext property 1</th></thead>
     <tbody>
      {songDataObj.map((song: any, i: any) => (
       <tr>
        <td>song.songName</td>
        <td>{song.extProp1?song.extProp1:''}</td>
       </tr>
      ))}
     </tbody>
   </table>
 </div>
 )
}

我正在更新每个响应的 songData，表格单元格至少刷新 70 ,80 次，页面崩溃。

【问题讨论】：

标签： reactjs react-functional-component

【解决方案1】：

当你只想做类似componentDidMount 的事情时，你需要添加这个

useEffect(()=>{ [you code here] },[])<---- you forgot the brackets

如果括号中没有任何内容，它将只运行一次 useEffect 内的代码。

如果你有一个变量在括号内，它会在每次括号内的值发生变化时运行 useEffect

【讨论】：

【解决方案2】：

使用这个useEffect(() => ,[]) 而不是useEffect(() => )

问题是你在 useEffect 中调用 setState ，每次重新渲染都会导致 useEffect 再次运行，它再次调用 setState ，它再次调用 useEffect ，它再次调用 setState ...... ......它永远持续下去。所以要限制这一点，您必须将 [dependency] 放在 useEffect 挂钩的末尾。控制何时触发 useEffect 调用，或者您可以通过在 useEffect 中放置 If 子句来控制它，以免再次触发网络调用。

【讨论】：

我试过 useEffect(() => ,[]) ，但问题是，当 api 响应返回时，组件不会刷新。并且该表包含旧值。

【解决方案3】：

问题是因为在useEffect 中使用了setState。它会在每次状态变化时运行，而它本身也会改变状态。您可以在useEffect 函数中定义依赖关系，以防止它无限重新运行。

useEffect(()=>{} ,[])

将空数组作为第二个参数添加到useEffect 意味着它只会在组件挂载时运行一次。

【讨论】：