在 React JS 中过滤数组时未定义

Question

我试图在 React 中为某些项目过滤数组（在我的情况下，我想要所有具有 type: "Plant" 的项目）。我可以成功地从 API 获取数据，但过滤它会产生此错误：Unhandled Rejection (TypeError): undefined is not an object (evaluating 'data.Array.object')

如果我通过控制台记录数据，数据如下所示： data

这是我的完整代码：

import React from "react";
import { API, graphqlOperation } from 'aws-amplify';
import { listTrackerItems } from '../graphql/queries';

class TrackerPlantsPage extends React.Component {
  state = {
    plant:'',
    plants: [],
    active: []
  };

  async componentDidMount() {
    const result = await API.graphql(graphqlOperation(listTrackerItems))
    let data = result.data.listTrackerItems.items
    console.log(data)
    let activePlants = data.Array.filter(t=>t.type === 'Plant');
    this.setState({active: activePlants, plants: data });
  }

  render() {
    const { plants, active } = this.state
    console.log(plants)

    return (
      <>
      <div class="container">

        {/* Cards */}
              <div id="toggle-harvested" class="">
              <div class="uk-child-width-1-3 uk-grid-small uk-grid-match uk-grid">
                {plants.map(item => (
                            <div key={item.id} class="uk-margin-top uk-margin-bottom">
                                <div class="uk-card uk-card-secondary uk-card-body">
                                    <div class="uk-card-badge uk-label">Harvested on {item.harvestDate}</div>
                                        <div class="uk-child-width-expand@s uk-text-center" uk-grid>
                                            <div>
                                                <div>
                                                    <h3 class="uk-card-title uk-margin-remove-bottom">{item.name}</h3>
                                                </div>
                                            </div>
                                        </div>
                                        <ul class="uk-list uk-list-striped">
                                            <li>Planted: {item.todaysDate}</li>
                                            <li>Assigned: {item.assignedUser}</li>
                                            <li>{item.description}</li>
                                        </ul>
                                </div>
                            </div>
                        ))}
                </div>
              </div>
              </div>
              </div>
      </>
    )
  }
}

export default TrackerPlantsPage;

问候

Answer 1

改为data.filter(t => t.type === 'Plant')。