reactjs 如何删除react类组件中重复的数组值

j2qf4p5b 于 2023-01-30 发布在 React

关注(0)|答案(2)|浏览(161)

我有一个显示对象数组的react类组件。但是，当我渲染显示数据时，我得到了重复的数据。我该如何删除重复的数据呢？

Customer.js

    this.state = {
          customer:[
           { id: 1, createdAt: "2023-01-22T05:19:45.943Z" },
           { id: 1, createdAt: "2023-01-19T02:19:45.943Z" },
           { id: 2, createdAt: "2023-01-18T05:30:45.943Z" },
          ],
        };

    componentDidMount() {
      axios
        .get("http://localhost:4000/customer/show", {
          responseType: "json"
        })
        .then(response => {
          
          this.setState({ customer: response.data });
        });
    }

.....................................
  render() {
  return(
     {
        this.state.customer?.map((item) => {
            return (
            <div>
              <div key={ item.id }> Time of Visit: {moment(item.createdAt).format('hh:mm A')} 
              </div>
            </div>
            );
         })
     })}

产出
访视时间：5：19 PM访视时间：下午2时19分
访视时间：下午5：30访视时间：下午5时30分
当我渲染对象数组时，我得到了重复的值。我怎样才能改变这个代码，使其只显示唯一的值呢？谢谢

reactjs

来源：https://stackoverflow.com/questions/75263221/how-to-remove-duplicate-array-values-in-react-class-component

2条答案

按热度按时间

6vl6ewon1#

这是过滤掉重复值的最佳方法：

const ids = demoArray.map((d) => d.id)
const filteredResponse = demoArray.filter(
    ({ id }, index) => !ids.includes(id, index + 1)

因此，对于您的代码，它应该是这样的：

this.state = {
  customer:[
   { id: 1, createdAt: "2023-01-22T05:19:45.943Z" },
   { id: 1, createdAt: "2023-01-19T02:19:45.943Z" },
   { id: 2, createdAt: "2023-01-18T05:30:45.943Z" },
  ],
};

componentDidMount() {
axios
.get("http://localhost:4000/customer/show", {
  responseType: "json"
})
.then(response => {
  const ids = response.data.map((d) => d.id)
  const filteredResponse = response.data.filter(
({ id }, index) => !ids.includes(id, index + 1)
)
  
  this.setState({ customer: filteredResponse });
});
}

render() {
return(
  {this.state.customer?.map((item) =>  (
    <div>
      <div key={ item.id }> Time of Visit: 
        {moment(item.createdAt).format('hh:mm A')} 
      </div>
    </div>
    )
 )
)
}

赞(0）回复(0）举报 2023-01-30

vzgqcmou2#

您可以使用数组筛选器函数自定义输出。

function filterToGetEachIdOnce(item, index) {
    return customer.findIndex(customer => customer.id === item.id) === index)
}

render() {
  const { customer = [] } = this.state

  return customer
         .filter(filterToGetEachIdOnce)
         .map((item) => {
            return (
            <div>
              <div key={ item.id }> Time of Visit: {moment(item.createdAt).format('hh:mm A')} 
              </div>
            </div>
            );
         })
     })}

我已经提取了过滤器函数，以明确您可以根据需要修改它。
有关详细信息，请查看以下链接：

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 如何删除react类组件中重复的数组值

2条答案

相关问题

热门标签

最新问答