反应显示唯一名称数据

Question

我在react js中遇到问题。我想在组件页面中显示unique name。

反应成分

    this.state = { 
      staff: [],
    }


  //fetch appointment data
  componentDidMount() {
     axios.get(`http://localhost/v1/appointments/`)
    .then(res => {
      // console.log(res);
      const appointmentdata = res.data; 
        this.setState({ 
          staff : appointmentdata.staff
        });
      })
    }



    <div className="row">
          {this.state.staff.map((data, i) => (
          <div className="full-block">
              <p key={i}>
              {data.full_name}
              </p></div>
          )
          )}
  </div>

我的输出

shop
shop
Staff
Staff
book

预期输出：显示数据中的唯一名称

shop
Staff
book

我该做什么？有人帮我吗？

Answer 1

您可以检查https://lodash.com/docs/#uniq之类的内容来获得无重复数组。然后，您就可以像执行操作一样对其进行映射。

如果您不想使用外部库，也可以检查Set并对其进行操作。您可能需要将其转换回数组，因为Set没有map方法。