时间戳

首页 > 解决方案 > 反应过滤器更改数据中的ID

javascript - 反应过滤器更改数据中的ID

问题描述

我正在尝试创建一个简单的投资组合网站，并且很难使用投资组合项目详细信息组件。我创建了一个投资组合项目列表作为 JSON 数据列表，它将在应用程序中获取资产。我决定对其进行硬编码而不是托管数据，因为它不会经常更改，并且艺术家将每年更新一次或两次他们的作品集。

这是 JSON 中的简单数据列表：

[
    {
        "id": "1",
        "img_code": "florida.jpg",
        "creation_medium": "Adobe Illustrator",
        "meta": ["graphic design", "logo", "Adobe Illustrator", "Florida Graphics & Marketing"]
    },
    {
        "id": "2",
        "img_code": "musicapp.png",
        "creation_medium": "Adobe XD",
        "meta": ["app design", "music app", "Adobe XD", "Florida Graphics & Marketing"]
    },
    {
        "id": "3",
        "img_code": "dreamroom.jpg",
        "creation_medium": "Sketch for iPad Pro",
        "meta": ["hand sketch", "digital art", "Apple Sketch", "dream office"]
    },
    ...
]

我正在尝试在组件中过滤该列表以在详细信息页面上显示适当的项目。这是代码：

import React, { Component } from 'react'
import Data from '../data/portfolio.json';

export class PortfolioDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            itemId: this.props.location.state ? this.props.location.state.id : window.location.pathname.split('/')[2],
            portfolioItem: {}
        }
    }

    componentDidMount() {
        this.fetchPortfolioItems();
    }

    fetchPortfolioItems() {
        const data = Data.filter(item => item.id = 1);
        this.setState({portfolioItem: {data} });
    }
    
    render() {
        ....
    }

}

export default PortfolioDetails

但是，它不会返回一个 id 为 1 的项目，而是将每个项目的 id 更改为 1。这是我在控制台记录结果时得到的结果......

0: {id: 1, img_code: "florida.jpg", creation_medium: "Adobe Illustrator", meta: Array(4)}
1: {id: 1, img_code: "musicapp.png", creation_medium: "Adobe XD", meta: Array(4)}
2: {id: 1, img_code: "dreamroom.jpg", creation_medium: "Sketch for iPad Pro", meta: Array(4)}

我错过了什么？我认为这将是 filter() 方法的简单使用。

标签： javascriptreactjsfilterfind

解决方案

您的代码明确告诉 Javascript 将 1 的值分配给每个 id，当然，1 是真实的，因此它会向过滤器函数返回 true。

改变 const data = Data.filter(item => item.id = 1);

至

const data = Data.filter(item => item.id == 1);

推荐阅读