使用map()渲染组件时控制台日志无限重复问题求助

核心问题 #

你的CourseMatrix.js里的useEffect没有设置依赖数组，这会引发无限循环：

• 组件每次渲染都会执行useEffect内的请求代码
• 请求完成后调用setCoursesList更新状态，触发组件重新渲染
• 重新渲染又会再次执行useEffect，循环往复，导致控制台重复输出请求结果

修复方法 #

修改CourseMatrix.js中的useEffect，添加空依赖数组[]，让它只在组件首次挂载时执行一次：

useEffect(() => {
    axios.get(`http://localhost:3001/courses`).then((response) => {
        setCoursesList(response.data);
        console.log(response.data);
    })
}, []); // 添加空依赖数组

补充说明 #

• 依赖数组用来指定触发useEffect重新执行的变量，空数组意味着没有依赖项，仅在组件挂载时运行一次
• 如果后续需要根据某个变量（比如筛选条件）重新请求数据，把该变量加入依赖数组即可，例如[filterKeyword]

内容的提问来源于stack exchange，提问作者Chenchen