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