React TSX中从API获取数组数据后渲染时值异常求助

• 检查初始State的类型与结构
  确保issuesList的初始值是符合预期的数组类型，比如：

  const [issuesList, setIssuesList] = useState<IssueType[]>([])
  

  若初始值设为null或undefined，渲染时直接访问company_name会触发错误，且console.log会显示异常数据。渲染时建议添加空值兜底：

  issuesList.map(issue => issue?.company_name || '')
  

• 确认useEffect的异步逻辑与依赖
  检查Axios调用的异步处理是否正确，务必用async/await包裹并捕获错误：

  useEffect(() => {
    const fetchIssues = async () => {
      try {
        const res = await axios.get('/api/issues');
        console.log('API原始返回:', res.data); // 核对数据结构
        setIssuesList(res.data);
      } catch (err) {
        console.error('数据请求失败:', err);
      }
    };
    fetchIssues();
  }, []);
  

  注意：setState是异步操作，你在setIssuesList后console的是API返回的原始数据，而非刚更新的state——若直接console.log(issuesList)，会显示更新前的值，这是React的正常特性。同时确认useEffect的依赖数组是否合理，空数组仅在组件挂载时执行一次，若需触发更新要添加对应依赖项。

• 验证API返回的字段匹配度
  后端Mongoose返回的JSON可能存在字段名不一致问题（比如后端实际返回companyName而非company_name），在useEffect里打印res.data[0]仔细核对字段名。同时检查TS类型定义是否正确：

  interface IssueType {
    _id: string;
    company_name: string;
    // 其他必填字段...
  }
  

• 排查渲染逻辑的执行时机
  组件顶层的console.log会在每次渲染时执行，包括初始渲染（此时issuesList是空数组），所以第一次打印会显示空数据。建议把console.log放在map内部，查看每个issue的实际值：

  return (
    <div>
      {issuesList.map(issue => {
        console.log('当前渲染的issue:', issue);
        return <div key={issue._id}>{issue.company_name}</div>;
      })}
    </div>
  );
  

• 检查后端Mongoose查询配置
  确认Mongoose的schema中是否定义了company_name字段，且查询时未通过select过滤掉该字段：

  const IssueSchema = new mongoose.Schema({
    company_name: { type: String, required: true },
    // 其他字段...
  });
  // 查询时确保没有排除company_name
  const issues = await Issue.find().select('company_name ...');
  

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