React中如何在无数据的表格单元格中显示短横线(-)

我明白你遇到的问题了——当animals是空数组时，表格单元格本该显示短横线-，但现在却是空白的。问题出在你判断数组是否为空的方式上，咱们来一步步解决它。

问题根源 #

在JavaScript里，数组是引用类型，直接用props.value !== []来判断是永远成立的——哪怕两个数组内容都是空，它们指向的内存地址也不一样，所以这个判断完全起不到作用。当animals是空数组时，props.value.map(...)会返回空字符串，单元格自然就空白了。

修改后的代码 #

我们需要改用数组的length属性来判断是否为空，同时可以加上Array.isArray做类型校验，避免非数组值的干扰：

export default function Animals() { 
  const data = useMemo(() => [ 
    { 
      Header: 'Animals', 
      accessor: (row) => row.animals, 
      Cell: (props) => {
        const animals = props.value;
        // 判断是否为空数组（或非数组类型）
        if (!Array.isArray(animals) || animals.length === 0) {
          return <div>-</div>;
        }
        // 有动物数据时的渲染逻辑
        return (
          <div> 
            {animals.map(({ name }) => name).join(", ")} 
            <InfoIcon 
              position="right" 
              message={animals.map((o) => ( 
                <span key={o.name}> 
                  <b>{o.name}</b> 
                  <p>Type: {o.type}</p> 
                  <p>Price: {o.price}</p> 
                </span> 
              ))} 
            />
          </div> 
        );
      }
    },
    // 其他列配置...
  ], []); // 注意useMemo要加依赖数组，避免不必要的重渲染

  // 表格渲染逻辑...
}

关键修改点 #

1. 正确判断空数组：用animals.length === 0替代错误的props.value !== []，同时用Array.isArray确保我们处理的是数组类型。
2. 提前返回空状态：如果数组为空，直接返回<div>-</div>，避免执行后面的渲染逻辑。
3. 优化代码结构：把逻辑拆分成清晰的条件分支，可读性更强，也更容易维护。

这样修改后，当animals是空数组时，单元格就会显示短横线-，有数据时则正常展示动物名称和信息图标啦。

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