Question

我有一个本地JSON模式，我可以对其进行过滤并由某些Id显示。以下是JSON模式。

Users.json

[
  {
    "BossId": "03",
    "DateOfBirth": "1966-09-27T00:00:00",
    "FamilyName": "Montejano",
    "Gender": "Unspecified",
    "GivenName": "Trinh",
    "Id": "08",
    "Title": "Tech Manager"
  },
  {
    "BossId": "00",
    "DateOfBirth": "1927-01-29T00:00:00",
    "FamilyName": "Fetzer",
    "Gender": "Unspecified",
    "GivenName": "Winfred",
    "Id": "00",
    "Title": "CEO"
  },
  {
    "BossId": "01",
    "DateOfBirth": "1927-08-20T00:00:00",
    "FamilyName": "Dandrea",
    "Gender": "Male",
    "GivenName": "Erich",
    "Id": "02",
    "Title": "VP of Marketing"
  },
  {
    "BossId": "01",
    "DateOfBirth": "1929-02-07T00:00:00",
    "FamilyName": "Nisbet",
    "Gender": "Male",
    "GivenName": "Reinaldo",
    "Id": "03",
    "Title": "VP of Technology"
  },
  {
    "BossId": "01",
    "DateOfBirth": "1932-06-13T00:00:00",
    "FamilyName": "Bufford",
    "Gender": "Unspecified",
    "GivenName": "Alleen",
    "Id": "04",
    "Title": "VP of HR"
  },
  {
    "BossId": "02",
    "DateOfBirth": "1936-09-26T00:00:00",
    "FamilyName": "Klopfer",
    "Gender": "Female",
    "GivenName": "Kristyn",
    "Id": "05",
    "Title": "Director of Marketing"
  },
  {
    "BossId": "01",
    "DateOfBirth": "1937-11-23T00:00:00",
    "FamilyName": "Duhon",
    "Gender": "Male",
    "GivenName": "Sophie",
    "Id": "01",
    "Title": "Tech Manager"
  },
  {
    "BossId": "03",
    "DateOfBirth": "1948-04-05T00:00:00",
    "FamilyName": "Mirabal",
    "Gender": "Female",
    "GivenName": "Suanne",
    "Id": "07",
    "Title": "Tech Manager"
  },
  {
    "BossId": "04",
    "DateOfBirth": "1966-10-13T00:00:00",
    "FamilyName": "Maslowski",
    "Gender": "Unspecified",
    "GivenName": "Norah",
    "Id": "09",
    "Title": "Tech Manager"
  },
  {
    "BossId": "06",
    "DateOfBirth": "1967-08-25T00:00:00",
    "FamilyName": "Redford",
    "Gender": "Female",
    "GivenName": "Gertrudis",
    "Id": "10",
    "Title": "Tech Lead"
  },
  {
    "BossId": "06",
    "DateOfBirth": "1968-12-26T00:00:00",
    "FamilyName": "Tobey",
    "Gender": "Male",
    "GivenName": "Donovan",
    "Id": "11",
    "Title": "Tech Lead"
  },
  {
    "BossId": "09",
    "DateOfBirth": "1969-10-16T00:00:00",
    "FamilyName": "Vermeulen",
    "Gender": "Male",
    "GivenName": "Rich",
    "Id": "12",
    "Title": "Trainer Lead"
  },
  {
    "BossId": "09",
    "DateOfBirth": "1972-10-16T00:00:00",
    "FamilyName": "Knupp",
    "Gender": "Male",
    "GivenName": "Santo",
    "Id": "13",
    "Title": "HR Manager"
  },
  {
    "BossId": "12",
    "DateOfBirth": "1974-03-23T00:00:00",
    "FamilyName": "Grooms",
    "Gender": "Female",
    "GivenName": "Jazmin",
    "Id": "14",
    "Title": "Trainer"
  },
  {
    "BossId": "13",
    "DateOfBirth": "1978-08-25T00:00:00",
    "FamilyName": "Cheeks",
    "Gender": "Female",
    "GivenName": "Annelle",
    "Id": "15",
    "Title": "Recruiter"
  },
  {
    "BossId": "15",
    "DateOfBirth": "1979-08-21T00:00:00",
    "FamilyName": "Harshaw",
    "Gender": "Unspecified",
    "GivenName": "Eliza",
    "Id": "16",
    "Title": "Trainer"
  },
  {
    "BossId": "08",
    "DateOfBirth": "1980-02-09T00:00:00",
    "FamilyName": "Broaddus",
    "Gender": "Unspecified",
    "GivenName": "Xiomara",
    "Id": "17",
    "Title": "Senior Software Developer"
  },
  {
    "BossId": "11",
    "DateOfBirth": "1981-09-08T00:00:00",
    "FamilyName": "Jungers",
    "Gender": "Unspecified",
    "GivenName": "Erminia",
    "Id": "18",
    "Title": "Software Developer"
  },
  {
    "BossId": "10",
    "DateOfBirth": "1984-03-18T00:00:00",
    "FamilyName": "Moffatt",
    "Gender": "Female",
    "GivenName": "Maria",
    "Id": "19",
    "Title": "Software Developer"
  },
  {
    "BossId": "10",
    "DateOfBirth": "1990-09-24T00:00:00",
    "FamilyName": "Grimaldo",
    "Gender": "Female",
    "GivenName": "Tammera",
    "Id": "20",
    "Title": "Senior Software Developer"
  },
  {
    "BossId": "10",
    "DateOfBirth": "1992-06-18T00:00:00",
    "FamilyName": "Das",
    "Gender": "Female",
    "GivenName": "Sharyl",
    "Id": "21",
    "Title": "Software Developer"
  },
  {
    "BossId": "08",
    "DateOfBirth": "1993-11-15T00:00:00",
    "FamilyName": "Harlan",
    "Gender": "Unspecified",
    "GivenName": "Shan",
    "Id": "22",
    "Title": "UI Developer"
  },
  {
    "BossId": "11",
    "DateOfBirth": "1997-03-23T00:00:00",
    "FamilyName": "Almeida",
    "Gender": "Female",
    "GivenName": "Mariah",
    "Id": "23",
    "Title": "QA Tester"
  },
  {
    "BossId": "11",
    "DateOfBirth": "1998-11-10T00:00:00",
    "FamilyName": "Kerfien",
    "Gender": "Male",
    "GivenName": "Darnell",
    "Id": "24",
    "Title": "QA Tester"
  },
  {
    "BossId": "11",
    "DateOfBirth": "2004-04-22T00:00:00",
    "FamilyName": "Vierra",
    "Gender": "Female",
    "GivenName": "Janell",
    "Id": "25",
    "Title": "QA Tester"
  }
]

在我的组件中，我将导入JSON文件，然后导入一种过滤并显示结果的方法。

到目前为止，我已经使用axios，fetch和componentDidMount来实现我的目标。我的组件。

import React from "react";
import items from "../data/Users";
class OrgChartList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Users: []
    };
  }

  render() {
    const params = this.props.match.params.id;
    function filterItemsBy(items, filter = {}) {
      const filterBy = Object.entries(filter).reduce(
        (acc, [key, value]) => item => item[key] === value && acc(item),
        () => true
      );
      return items.filter(filterBy);
    }
    return (
      <div>{JSON.stringify(filterItemsBy(items, { BossId: params }))}</div>
    );
  }
}

export default OrgChartList;

如果我将JSON对象用作JavaScript对象，则它的工作原理就像

const items = [{}]，但在导入时会返回emtpy数组。

Answer 1

如果您正在使用CRA，则应该能够导入json文件。如果不是，则需要json-loader。

您似乎正在尝试通过附加到网址的id来过滤用户列表。

使用CRA和您的数据文件，我可以很好地进行过滤： https://codesandbox.io/s/4ry755y1rw

我敢打赌，您的filterItemsBy函数中发生了奇怪的事情

本地JSON模式返回空

1 个答案: