TypeError：無法讀取未定義（讀取“過濾器”）和未定義錯誤的屬性 - React

Question

我的 API 通話有問題。 我想為我的項目創建一個搜索欄，數據來自 API。 但是，當我添加過濾器 function 時出現錯誤。

TypeError: Cannot read properties of undefined (reading 'filter')

為了解決這個問題，我添加了可選的鏈接運算符，但它也不起作用，因為我得到“未定義”。 此外，為了獲取值，我使用了 useEffect 鈎子，但我不確定它是否是正確的解決方案。 我認為我的組件是在我的 API 調用未執行之前呈現的。 你能幫我修一下嗎？

這是我的主要組成部分：

import "../App.css"
import APICall from "./APICall.js"
import Filter from "./Filter.js"
import {useState} from "react"

function App() {
  const [datum, setDatum] = useState([])
  
  return (
    <div className="App">
      <Filter datum={datum} />
      <APICall setDatum={setDatum} />
    </div>
  )
}

export default App

這是我進行 API 調用時的子組件：

import React from 'react'
import axios from "axios"
import { useState, useEffect } from 'react'

function APICall({setDatum}) {
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchAPI = async () => {
      setLoading(true)
      try {
        const res = await axios(`https://api.spoonacular.com/food/products/search?query=yogurt&apiKey=`)
        setDatum(res.data.products)
        // console.log(datum)
      }
      catch(err) {
        console.log(err)
      }
      setLoading(false)
    }
    fetchAPI()
  }, [])

  if (loading === true) {
    return <div>Loading...</div>
  }
}

export default APICall

這是我遇到問題的另一個子組件：

import {useState, useEffect} from "react"

function Filter({datum}) {
  const [filterText, setFilterText] = useState("")

  const handleInput = (e) => {
    setFilterText(e.target.value)
  }

  useEffect(() => {
    const handleFilter = async () => {
      try {
         const filtered = await datum.title?.filter(item => {
          return Object.keys(item).some(key => 
           item[key].toString().toLowerCase().includes(filterText.toLocaleLowerCase())
          )
        })
        console.log(filtered)
      }
      catch (err) {
        console.log(err)
      }
    }
    handleFilter()
  }, [filterText])

  
  return (
    <div>
      <input type="text" placeholder="Please enter the name of the the food" onChange={handleInput} value={filterText} />

      {datum.map((el, id) => (
        <div key={id} className="items">
          <img src={el.image} alt={el.title} />
          <p>{el.title}</p>
        </div>
     ))}
    </div>
  )
}

export default Filter

編輯這是我從 API 獲得的一些數據：

0: {id: 201369, title: 'Yoplait Yogurt, Lactose Free Yogurt, Peach, 6.0 oz', image: 'https://spoonacular.com/productImages/201369-312x231.jpeg', imageType: 'jpeg'}
1: {id: 415304, title: 'Noosa Key Lime Finest Yoghurt, 8 OZ', image: 'https://spoonacular.com/productImages/415304-312x231.jpeg', imageType: 'jpeg'}
2: {id: 89557, title: 'Yoplait Light Yogurt with Granola, Blueberry, Fat Free, 12 oz, 2 Cups', image: 'https://spoonacular.com/productImages/89557-312x231.png', imageType: 'png'}

Answer 1

我必須進行很多更改才能使其正常工作。 一些注意事項：你想按標題過濾，所以你做了datum.title.filter數據是一個數組，它沒有標題屬性，這就是你得到未定義的原因。 您必須使用datum.filter ，並且filter function 不是 promise，您不需要使用await 。 我還為過濾后創建了另一個state，並讓原始數據保持不變，以便能夠將itens重置為原始項目，否則如果您過濾了原始itens，它們會丟失。 我使Filter.js中的代碼更簡單，不需要useEffect，當你輸入你改變filteredDatum的state和列表被過濾，我也是一個很好的搜索邏輯，搜索單獨的詞，例如，如果標題是“yougurt lactose 100”，如果搜索是“yog 100”，它會找到

應用程序.js

import "../App.css";
import APICall from "./APICall.jsx";
import Filter from "./Filter.jsx";
import { useState } from "react";

function App() {
  const [datum, setDatum] = useState([]);
  const [datumFiltered, setDatumFiltered] = useState([]);

  return (
    <div className="App">    
      <Filter datum={datum} datumFiltered={datumFiltered} setDatumFiltered={setDatumFiltered} />
      <APICall setDatum={setDatum} setDatumFiltered={setDatumFiltered} />
    </div>
  );
}

export default App;

過濾器.js

function Filter({ datum, datumFiltered, setDatumFiltered }) {
  const handleFilter = (e) => {
    const filterText = e.target.value.toLowerCase();
    const wordsToFilter = filterText.split(" ");
    datumFiltered = datum.filter((item) => {
      return wordsToFilter.every((word) => item.title.toLowerCase().includes(word));
    });
    setDatumFiltered(datumFiltered);
  };

  return (
    <div>
      <input type="text" placeholder="Please enter the name of the the food" onChange={handleFilter} />

      {datumFiltered.map((el, id) => (
        <div key={id} className="items">
          <img src={el.image} alt={el.title} />
          <p>{el.title}</p>
        </div>
      ))}
    </div>
  );
}

export default Filter;

APICall.js

import React from "react";
import axios from "axios";
import { useState, useEffect } from "react";

//REMOVE THIS FUNCTION
const axiosDummyCall = async () => {
  return [
    {
      id: 201369,
      title: "Yoplait Yogurt, Lactose Free Yogurt, Peach, 6.0 oz",
      image: "https://spoonacular.com/productImages/201369-312x231.jpeg",
      imageType: "jpeg",
    },
    {
      id: 415304,
      title: "Noosa Key Lime Finest Yoghurt, 8 OZ",
      image: "https://spoonacular.com/productImages/415304-312x231.jpeg",
      imageType: "jpeg",
    },
    {
      id: 89557,
      title: "Yoplait Light Yogurt with Granola, Blueberry, Fat Free, 12 oz, 2 Cups",
      image: "https://spoonacular.com/productImages/89557-312x231.png",
      imageType: "png",
    },
  ];
};

function APICall({ setDatum, setDatumFiltered }) {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchAPI = async () => {
      setLoading(true);
      try {
        let datum = await axiosDummyCall(); //REPLACE WITH REAL CALL
        setDatum(datum);
        setDatumFiltered(datum);
      } catch (err) {
        console.log(err);
      }
      setLoading(false);
    };
    fetchAPI();
  }, []);

  if (loading === true) {
    return <div>Loading...</div>;
  }
}

export default APICall;

Answer 2

關於第二個 state：

如果你只有一個 state，例如： ['yogurt', 'yogurt fat free', 'ketchup'] ，如果你輸入yogurt ，則 state 會變成['yogurt', 'yogurt fat free'] , ketchup丟了。 如果您繼續輸入yogurt fat ，現在 state 再次更改為['yogurt fat free'] ，則丟失了 itens yogurt和ketchup 。 例如，您現在清除過濾器以再次顯示所有項目，現在唯一出現的項目是yogurt fat free ，因為原來的 state 已更改，其他項目丟失。 您將不得不再次調用 API 再次填寫列表。

這就是為什么我添加了第二個 state，這樣整個列表就不會被觸及，而且你總是可以再次找回所有的元素。