React TS组件中ICompetition接口props显示undefined问题求助

核心问题定位 #

1. State类型定义错误：Home组件中compList的类型被定义为ICompetition | null，但后端返回的是竞赛数组，类型不匹配导致后续渲染逻辑异常。
2. useEffect依赖缺失：未将props.bookmakerid加入依赖数组，当该props变化时无法重新发起请求。
3. Fetch错误处理不完整：当HTTP响应状态码非2xx时，未抛出错误，可能导致data为undefined，引发后续渲染问题。
4. 渲染判断逻辑冗余：基于错误的类型定义做数组判断，逻辑准确性不足。

具体修复步骤 #

1. 修正Home组件的State类型

将compList的类型改为数组类型，初始值设为空数组或null：

// Home组件中修改state定义
const [compList, setData] = useState<ICompetition[] | null>([]);
// 或者初始值为null，后续根据接口返回赋值
// const [compList, setData] = useState<ICompetition[] | null>(null);

2. 完善useEffect的依赖数组与错误处理

把props.bookmakerid加入依赖，同时补充非成功响应的错误抛出逻辑：

useEffect(() => {
    fetch("http://localhost:5242/Competitions?bid=" + props.bookmakerid, { method: "POST" })
        .then(response => {
            if (response.ok) {
                return response.json();
            }
            // 新增：非2xx响应时抛出错误
            throw new Error(`请求失败，状态码：${response.status}`);
        })
        .then(data => {
             setData(data);
             setLoading(false); // 新增：请求完成后关闭加载状态
        })
        .catch(err => {
            setError(err);
            setLoading(false); // 新增：请求失败后关闭加载状态
        });
}, [props.bookmakerid]); // 加入props.bookmakerid作为依赖

3. 优化渲染判断逻辑

基于修正后的数组类型，简化渲染判断：

// Home组件的render部分
<div id="runnerContainer" className="carousel-inner">
    {compList?.length > 0 ? compList.map((comp) => (                                
        <Competition competition={comp} key={comp.competitionId} />
    )) : <div>暂无竞赛数据</div>}
</div>

注：如果初始值设为null，可以用{compList && compList.map(...)}，但推荐配合加载状态显示加载提示。

4. 校验接口返回字段匹配

确保后端返回的JSON字段与ICompetition接口完全一致（注意大小写敏感）：

• 若后端返回字段为小写（如competitionid），需转换字段后再赋值：

  .then(data => {
       const formattedData = data.map(item => ({
           competitionId: item.competitionid,
           bookmakerId: item.bookmakerid,
           // 其他字段同理转换
           ...item
       }));
       setData(formattedData);
  })
  

5. 排查数据传递完整性

在Home组件的map循环中打印comp，确认数据结构是否符合ICompetition：

compList.map((comp) => {
    console.log(comp); // 确认comp的结构是否包含competitionId等必填字段
    return <Competition competition={comp} key={comp.competitionId} />
})

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