Reactjs axios请求+；映射函数中的react钩子导致无限循环

我试图按项目显示任务数。使用调用axios请求

getTasksByProject(_id);

导致一个循环，其中“nbrOfTasks”经常设置为不正确。我怎样才能防止这种情况

//Schema
const taskSchema = new mongoose.Schema({
  title: String,
  project: { type: ObjectId, ref: 'Project' },
})

const projectSchema = new mongoose.Schema ({
  name: String
})

守则：

const List = ({ match }) => {
  const [projects, setProject] = useState([]);
  const [nbrOfTasks, setNbrOfTasks] = useState();

  const getTasksByProject = ( _id) => {
    axios.get(`/api/tasks/tasksByProject/${_id}`)
    .then(response => {
      setNbrOfTasks(response.data.length);
    })
  }

  const loadProjects = () => {
    axios.get('/api/projects/').then(response => {
      setProject(response.data)
    })
  }

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

  return (
    <>
      <Table singleLine columns={4} striped>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Name</Table.HeaderCell>
            <Table.HeaderCell>#Tasks</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {projects.map((project) => {
            const { _id, name, status, description } = project;

            getTasksByProject(_id);

            return (
              <Table.Row key={_id}>
                <Table.Cell>{`${name}`}</Table.Cell>
                <Table.Cell>{nbrOfTasks}</Table.Cell>
              </Table.Row>
            )
          })}
        </Table.Body>
      </Table>
    </>
  )
}

export default List;

const List=（{match}）=>{
const[projects，setProject]=useState（[]）；
const[nbroftask，setnbroftask]=useState（）；
const getTasksByProject=（\u id）=>{
get（`/api/tasks/tasksByProject/${{u id}`）
。然后（响应=>{
setnBroftTasks（响应.数据.长度）；
})
}
const loadProjects=（）=>{
get（'/api/projects/'）。然后（响应=>{
setProject（response.data）
})
}
useffect（（）=>{
loadProjects（）；
}, [])
返回(
名称
#任务
{projects.map（（project）=>{
const{u id，name，status，description}=project；
getTasksByProject（_id）；
返回(
{`${name}`}
{nbrOfTasks}
)
})}
)
}
导出默认列表；

hlo kiwi，您不能在渲染函数内部设置状态。（您已经调用了getTasksByProject（\u id）；在渲染函数内部，可以更改状态并再次调用渲染函数，依此类推）。这会导致无限循环

你可以

const loadProjects = () => {
                axios.get('/api/projects/').then(response => {
                  response.data.map((project) => {
                        const { _id, name, status, description } = project;
                         axios.get(`/api/tasks/tasksByProject/${_id}`)
                .then(response => {


                })
      //here prepare new array with ({project_id,project_name,task length}) and use this array in render function instead

                })
              }

---

或者更好的解决方案是创建一个新的端点，该端点将返回带有（{project\u id，project\u name，task length}）的数组。

无限循环的原因是使用getTasksByProject更改render中的状态。是否可以更改api以返回项目的任务？如果您甚至不能解决无限循环问题，那么您的应用程序将不得不使用项目数调用GetTaskByProject api，这对性能非常不利。