TypeError：无法读取未定义的属性“过滤器” - 数据对象

Question

我正在尝试将一些数组项映射到过滤器下拉列表中以对数组输出进行排序。但是，我收到一个错误 - 'TypeError：无法读取未定义的属性'过滤器'。我很确定这取决于数据是一个对象。我对 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

控制台日志输出是这样的

Answer 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;
    }),
  );