TypeScript/React中映射对象数组：name值控制台可见但视图不显示

以下是几个常见的排查方向和解决方法：

• 确认状态更新触发重渲染
  如果resultsDataFetching是用普通变量存储的，修改它不会让React组件重新渲染。必须用useState或useReducer来管理这个数据：

  // 替换普通变量为状态
  const [resultsDataFetching, setResultsDataFetching] = useState([]);
  // 更新数据时调用set方法触发重渲染
  setResultsDataFetching(newData);
  

• 检查name是否为不可渲染的值
  控制台能打印不代表值能被React渲染，比如空字符串、undefined、null都会被React忽略。可以给渲染值加兜底，同时在控制台确认值的类型：

  {resultsDataFetching?.map(({name}:any, index: number) => {
    console.log("nameFrom", name, typeof name); // 确认值和类型
    return(
      <React.Fragment key={index}>
        <p>{name || '暂无名称'}</p> {/* 兜底显示空值 */}
      </React.Fragment>
    )
  })}
  

• 排查元素是否被隐藏
  检查外层div或父组件有没有设置display: none、visibility: hidden，或者存在条件渲染逻辑导致这个区域被隐藏。可以给外层div加个明显的样式（比如边框），确认元素是否真的出现在DOM中。

• 确认遍历的是有效数组
  确保resultsDataFetching是数组类型，?.map只会在数组上执行。可以打印验证：

  console.log('数据类型', Array.isArray(resultsDataFetching));
  

修改后的示例代码：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [resultsDataFetching, setResultsDataFetching] = useState([]);

  useEffect(() => {
    // 模拟接口请求获取数据
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setResultsDataFetching(data));
  }, []);

  return (
    <div style={{backgroundColor: "red", color: "white", padding: '1rem'}}>
      {resultsDataFetching?.map((item, index) => {
        console.log("nameFrom", item.name, typeof item.name);
        return(
          <div key={index}>
            <p>{item.name || '暂无名称'}</p>
          </div>
        )
      })}
    </div>
  );
};

export default YourComponent;

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