兄弟组件状态变更时useAsyncEffect未触发问题求助

核心问题 #

你遇到的问题是**StudentResults组件的useAsyncEffect没有在selectedStudent更新时重新触发**，原因是这个effect的依赖数组是空的[]，它只会在组件首次挂载时执行一次，后续selectedStudent变化时不会重新运行异步请求。

修复步骤 #

1. 更新useAsyncEffect的依赖数组：将selectedStudent添加到依赖数组中，这样每当selectedStudent变化时，effect就会重新执行，拉取对应学生的成绩数据。
2. 增加空值判断：在请求前先检查selectedStudent是否为null，避免发送无效的请求（比如URL中带null会导致接口报错）。

修改后的StudentResults组件代码：

import StudentResultItem from "./StudentResultItem"
import { useState } from 'react'
import useAsyncEffect from 'use-async-effect'

const StudentResults = ({selectedStudent}) => {
    
    console.log('Passed to Student Results: ', selectedStudent)
    const [results, setResults] = useState(null)

    useAsyncEffect(async isMounted => {
        // 先判断selectedStudent是否存在，避免无效请求
        if (!selectedStudent) return
        
        try {
            const response = await fetch(`http://localhost:8000/GetStudentResults/${selectedStudent}`)
            const json = await response.json()
            if (!isMounted()) return
            setResults(json)
            console.log(json)
        } catch (err) {
            console.error(err)
        }
    }, [selectedStudent]) // 这里添加selectedStudent到依赖数组

    return (
        <div>
            {results && results.map((result, _index) => (<StudentResultItem key={_index} result={result} />))}
        </div>
    )
}
    
export default StudentResults

额外优化建议 #

• StudentList组件的props声明了selectedStudent，但Dashboard并没有传递这个prop，如果后续需要用到可以补上：<StudentList setSelectedStudent={setSelectedStudent} selectedStudent={selectedStudent}/>
• 列表项的key尽量不要用索引i，建议使用唯一的item.studentid，避免列表更新时出现渲染问题。

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