开发者问题收集

TypeError:无法读取未定义的属性“filter”-数据对象

2020-12-06
2448

我正在尝试将一些数组项映射到过滤器下拉列表中,以对数组输出进行排序。但是,我收到一个错误 - “TypeError:无法读取未定义的属性“filter”。我很确定这是由于数据是对象。我对 JS 还很陌生,所以不确定下一步的最佳步骤是什么。

任何关于发生了什么以及我需要改变什么的指示都会很棒。如果您需要更多信息,请告诉我。-

import React, { useState, Fragment } from "react";
import { graphql } from 'gatsby'

const Page = ({data}) => {
  console.log('data is', data)
  const [filters, setFilters] = useState({
   type: "",
   propertyStatus: ""
 });

  const filteredProperties = data.edges.nodes.filter((node) =>
    Object.entries(filters).every(([filterName, filterValue]) => {
      if (filterValue === "") {
        return true;
      }

      return node[filterName] === filterValue;
    }),
  );

  return (
    <Fragment>
      {Object.entries(filters).map(([filterName, filterValue]) => {
        const allValuesForFilterKey = data.edges.nodes.map(
          (node) => node[filterName],
        );
        const uniqueValuesForFilterKey = [...new Set(allValuesForFilterKey)];

        return (
          <label style={{ marginRight: 10 }}>
            <span style={{ marginRight: 5 }}>{filterName}:</span>
            <select
              value={filterValue}
              onChange={(event) => {
                event.persist();
                setFilters((previousFilters) => {
                  return {
                    ...previousFilters,
                    [filterName]: event.target.value,
                  };
                })
              }                
             }
            >
              <option value="">No filter</option>
              {uniqueValuesForFilterKey.map((value) => (
                <option value={value}>{value}</option>
              ))}
            </select>
          </label>
        );
      })}

      <ul>
        {filteredProperties.map((node) => (
          <li>
            {node.name}
            <br />
            type: {node.type}
            <br />
            category: {node.category}
          </li>
        ))}
      </ul>
    </Fragment>
  );
}

export const query = graphql`
  query yourQueryName{
      allStrapiHomes {
        nodes {
          type
          propertyStatus
        }
      }
  }
`

export default Page

控制台日志输出是这个

在此处输入图像描述

1个回答

data.edges 是数组,而 data.edges.nodes 将未定义。

filter() 是数组的方法。

const filteredProperties = data.edges.filter((edge) =>
    Object.entries(filters).every(([filterName, filterValue]) => {
      if (filterValue === "") {
        return true;
      }

      return edge.node[filterName] === filterValue;
    }),
  );
wangdev87
2020-12-06