Блог

Я пытаюсь сопоставить некоторые элементы массива с раскрывающимися списками фильтров, чтобы отсортировать выходные данные массива. Однако я получаю сообщение об ошибке — ‘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
 

Вывод журнала консоли выглядит следующим образом

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