使用钩子获取数据时无限循环

Question

我正在尝试使用钩子，但处于无限循环中。代码如下。fetchSomeData 和 uuid 从父组件传入。每次获取的数据都是一样的。谢谢。

import React, { useState } from 'react';

const MyComponent = (props) => {
  const [myList, setMyList] = useState([]);

  const {fetchSomeData, uuid} = props;

  fetchSomeData(uuid)
    .then( (response) => {
      setMyList(response.payload.data.activities);
  })

  const renderItem = (item)=>{
    return (<div>{item.title}</div>)
  }

  return (
    <div> My COmponent 
      <div>
        {myList.map (renderItem)}
      </div>      
    </div>      
  )
}

export default MyComponent

Answer 1

因为你在每次渲染上执行 fetcher 函数，更新状态并触发新的渲染，它再次获取数据等等......

用一个包裹你的命令式代码 useEffect

useEffect(() =>{
    fetchSomeData(uuid)
        .then( (response) => {
            setMyList(response.payload.data.activities);
    })
},[uuid])

现在你只在uuid变化时获取