反应映射 - 映射 slug 名称时提供关键道具

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 prop 警告。

        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，然后我尝试了另一个提取（在地图内部），如下所示：

        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，但我只是不知道如何将它们放入我的标签组件。

感谢您的帮助。

Answer 1

在这种情况下，使用索引作为键

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

Answer 2

因为 fetch(//derpibooru.org/tags/${tag}.json) 是异步操作，而 map 只能与同步操作一起使用；

你可以在 for 里面迭代你的循环 async await 函数：

async function printFiles() {
    for (const tag of tags) {
        const res = await fetch(`//derpibooru.org/tags/${tag}.json`);
        console.log(res);
    }
}

Using async/await with a forEach loop