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

感谢您的帮助。

Answer 1

因为fetch（//derpibooru.org/tags/${tag}.json）是异步操作，并且映射仅适用于同步操作；

您可以在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

Answer 2

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

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

反应映射-在子段名称上映射时提供关键道具

2 个答案: