reactjs - React 映射 - 在映射 slug 名称时提供 key prop

Question

我试图为我的 Tag 组件提供一个 key 属性，但我似乎无法为我的 Tag 提供正确的 ID > 组件。

首先，我要调用此(单个图像)端点:

componentDidMount() {
    fetch(`//derpibooru.org/${this.props.match.params.id}.json`)
        .then(res => res.json())
        .then(data => this.setState({ singleImage: data }))
}

提供此 json 文件 here (例如)。这是一个示例图像:

然后，我想将该 ID 插入到此 Tag 组件中，以抑制来自 React 的 key 属性警告。

        const tagList = this.state.singleImage.tags.split(', ').map( tag => {
                return (
                    <Link to={`/tags/${tag}`}>
                        <Tag key={???} tag={tag} />
                    </Link>
                )
            }
        )

但是，问题来了。我正在映射 [...].singleImage.tags这是标签 slugs，但我没有收到 ID。在API中，有一个端点//derpibooru.org/tags/{some_tag}.json在这个(标签)端点，我可以通过 tag.id 获取 ID我尝试了另一次获取(在 map 内部)，如下所示:

        const tagList = this.state.singleImage.tags.split(', ').map( tag => {
                fetch(`//derpibooru.org/tags/${tag}.json`)
                .then(res => res.json())
                .then(data => {
                  return (
                    <Link to={`/tags/${tag}`}>
                        <Tag key={data.tag.id} tag={tag} />
                    </Link>
                  )
                }
            }
        )

但在这种情况下，map不返回。

我觉得这是错误的方法，因为单个图像端点具有 tag_ids ，但我只是不知道如何将它们放入我的 Tag 组件中。

感谢您的帮助。

Answer 1

在本例中使用索引作为键，例如

  const tagList = this.state.singleImage.tags.split(', ').map( (tag, index) => {
            return (
                <Link to={`/tags/${tag}`}>
                    <Tag key={'Key-'+index} tag={tag} />
                </Link>
            )
        }
    )