Next.js Type 'number'不匹配string类型及key prop警告求助

两个问题都出在数组map渲染表格行的逻辑里，直接按下面改就行：

1. 类型报错：Type 'number' is not assignable to type 'string' #

• 根因：<tr>标签上写的id={id}里的id是map回调返回的数组索引，类型为number，但HTML原生id属性只接受字符串类型值，TS校验不通过就会抛这个错。
• 修复：如果不需要给tr绑定索引id，直接删掉这个多余属性即可；如果确实需要用，把值转成字符串：id={String(id)}。

2. 渲染警告：Each child in a list should have a unique "key" prop #

• 根因：map方法返回的最外层元素是你写的空Fragment简写<>...</>，React遍历列表时只会读取直接返回的根元素上的key属性，你把key写在内部的<tr>标签上，React识别不到。另外你用val.symbol当key也有潜在问题，不同币种可能存在重名交易代码的情况，稳定性不足。
• 修复：你这里map返回的内容只有单个tr元素，完全没必要套一层多余的Fragment，直接返回tr即可；key优先用接口返回的每个币种唯一的id字段，是天然的唯一值。

替换后的map渲染段代码 #

<tbody>
  {crypto
    .filter((val) => {
      return val.name.toLowerCase().includes(search.toLowerCase());
    })
    .map((val) => {
      return (
        <tr key={val.id}>
          <td className="rank">{val.rank}</td>
          <td className="logo">
            <a href={val.websiteUrl}>
              <img src={val.icon} alt="logo" width="30px" />
            </a>
            <p>{val.name}</p>
          </td>
          <td className="symbol">{val.symbol}</td>
          <td>${(val.marketCap / 1000000000).toFixed(1)} B</td>
          <td>${val.price < 0.01 ? val.price.toFixed(4) : val.price.toFixed(2) }</td>
          <td>${(val.volume / 1000000000).toFixed(1)} B</td>
          <td>{val.symbol}</td>
        </tr>
      );
    })}
</tbody>

顺手修几个代码里的隐藏问题 #

• 接口地址参数拼错了：¤cy=USD是错误写法，应该改成&currency=USD，不然接口拿不到正确的法币参数
• 如果是TS项目，crypto的state初始化要补类型，不然会被推成never[]，后续访问币种属性会报类型错，初始化改成const [crypto, setCrypto] = useState<any[]>([]);即可，要更严谨可以自定义Coin接口替换any
• 表头重复写了两个Symbol列，属于冗余代码，删掉其中一个即可
• 代码里引入了js-cookie但完全没用到，删掉无用引入减少包体积

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