我应该把什么作为 .map 索引的类型，以便我可以把它作为一个 id？

Question

所以我有一个城市数组，我将它们映射到一个 react-router 组件（这样我就可以在获取所点击城市的数据后重定向到主页）。我将 .map 索引（数组中项目的索引）作为 html id。这个项目本来是用JS的，现在我把它改成TS了。我在 id={i} 上收到一条错误消息：类型“数字”不可分配给类型“字符串”。我知道我必须做什么，但我不知道该怎么做。我需要在哪里更改类型才能正确传递它？

const cities = city.map((town, i) => {
        return <Link 
        className={`citiy ${props.dark ? 'dark' : ''}`}
        to='/home' 
        onClick={handleFetch} 
        key={nanoid()} 
        id={i}>
            {town}
        </Link>
    })

Answer 1

您可以使用字符串插值将其转换为字符串：

const cities = city.map((town, i) => {
    return <Link 
    className={`citiy ${props.dark ? 'dark' : ''}`}
    to='/home' 
    onClick={handleFetch} 
    key={nanoid()} 
    id={`${ i }`}>
        {town}
    </Link>
})

Answer 2

您可以将其转换为字符串

const cities = city.map((town, i) => {
        return <Link 
        className={`citiy ${props.dark ? 'dark' : ''}`}
        to='/home' 
        onClick={handleFetch} 
        key={String(id)} 
        id={i}>
            {town}
        </Link>
    })