javascript - React 在添加标签时无法删除重复项

Question

我无法在使用 div/link 时删除重复项，因为我想在数组(datalist.subreddit)内添加链接。

我注意到当我删除 div/link 时删除了重复的作品(你可以查看我的 block 注释脚本)。

我也想添加 toLowerCase，但不知何故它也不起作用。

import React, { Component } from "react";
import fetch from "isomorphic-fetch";
import { Link } from "react-router-dom";
export class Sublist extends Component {
  state = {
    dataList: []
  };
  componentDidMount() {
    fetch("https://redditclone-project.firebaseio.com/data.json", {
      method: "get",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    })
      .then(res => res.json())
      .then(res => {
        const fetchedListData = [];
        for (let key in res) {
          fetchedListData.push({
            ...res[key],
            id: key
          });
        }
        this.setState({ dataList: fetchedListData });
      })
      .catch(err => {
        console.log(err);
      });
  }
  render() {

/*const filt = this.state.dataList.map(data => {
  return data.dataList;
}); work*/

    //didn't work
    const filt = this.state.dataList.map(data => {
      return (
        <div>
          <Link to={"/r/" + data.dataList.subreddit} key={data.id}>
            {data.dataList}
          </Link>
        </div>
      );
    });

    const unique = [...new Set(filt.map(tag => tag.subreddit))];


    return <div>{unique}</div>;
  }
}

export default Sublist;

谢谢

Answer 1

尝试这样

键必须是包装(根)元素而不是内部 <div key={data}>

    render() {
    const unique = [
      ...new Set(this.state.dataList.map(data => data.dataList.subreddit))
    ];
    const filtered = unique.map(data => {
      return (
        <div key={data}>
          <Link to={`/r/${data}`}>
            {data}
          </Link>
        </div>
      );
    });

    return <div>{filtered}</div>;
  }

工作示例 https://codesandbox.io/s/goofy-mendeleev-xcrtd