過濾數組並在 React 中顯示結果

Question

我正在嘗試通過 React 中的按鈕 onClicks 過濾我的結果，但由於某種原因它不起作用？

https://stackblitz.com/edit/react-x7tlxr?file=src/App.js

import React, {useEffect, useState} from "react";
import axios from 'axios';
import "./style.css";

export default function App() {

  const [fetchData, setFetchData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  const url = 'https://jsonplaceholder.typicode.com/todos';

  useEffect(() => {
      let mounted = true;
      const loadData = async () => {
          try {
              const response = await axios(url);
              if (mounted) {
                  setFetchData(response.data);
                  setLoading(false);
                  setIsError(false);
                  console.log('data mounted')
              }
          } catch (err) {
              setIsError(true)
              setLoading(false);
              setFetchData([]);
              console.log(err);
          }
      };
      loadData();
      return () => {
          mounted = false;
          console.log('cleaned');
      };
  },
      [url]
  );
  

  const renderdata = () => {
    if (fetchData) {
      return (
        <div>{fetchData.map(inner => {
          return (
            <React.Fragment key={inner.id}>
            <p>{inner.title}</p>
            </React.Fragment>
          )
        })}</div>
      )
    } else {
      <p>No data to display!</p>
    }
  }

  const handle1 = () => {
    const result1 = fetchData.filter((inner) => inner.id === '1');
    setFetchData(result1);
  }

  const handle2 = () => {
    const result2 = fetchData.filter((inner) => inner.id === '2');
    setFetchData(result2);
  }

  const handleAll = () => {
    setFetchData(fetchData);
  }


  return (
    <div>
      <button onClick={handleAll}>Show all</button>
      <button onClick={handle1}>Filter by id 1</button>
      <button onClick={handle2}>Filter by id 2</button>
      {renderdata()}
    </div>
  );
}

Answer 1

id是一個數字，而不是一個字符串，因此您需要像這樣更改過濾器：

const result1 = fetchData.filter((inner) => inner.id === 1);

您還有另一個問題，即您在過濾時更改了整個數據集，因此一旦過濾，您就無法“取消過濾”或在另一個 ID 上再次過濾。

您需要保持原始fetchedData不變。

此示例顯示如何修復它。

Answer 2

我在您的代碼中發現了 2 個問題

1. API 結果中的 Id 是數字而不是字符串inner.id === '2' 。 所以這將返回 false inner.id === 2你需要像這樣使用

2. 當您將過濾后的值分配給原始數組時，它當然會更改原始數組，因此當您嘗試第二次過濾它時，獲取數據數組中沒有原始 API 結果，因為它已經被過濾了所以我創建了多一個數組filteredData這會起作用。

    import React, {useEffect, useState} from "react"; import axios from 'axios'; import "./style.css"; export default function App() { const [fetchData, setFetchData] = useState([]); const [filteredData, setFileredData] = useState([]); const [loading, setLoading] = useState(true); const [isError, setIsError] = useState(false); const url = 'https://jsonplaceholder.typicode.com/todos'; useEffect(() => { let mounted = true; const loadData = async () => { try { const response = await axios(url); if (mounted) { setFetchData(response.data); setFileredData(response.data) setLoading(false); setIsError(false); console.log('data mounted') } } catch (err) { setIsError(true) setLoading(false); setFetchData([]); console.log(err); } }; loadData(); return () => { mounted = false; console.log('cleaned'); }; }, [url] ); const renderdata = () => { if (filteredData) { return ( <div>{filteredData.map(inner => { return ( <React.Fragment key={inner.id}> <p>{inner.title}</p> </React.Fragment> ) })}</div> ) } else { <p>No data to display!</p> } } const handle1 = () => { const result1 = fetchData.filter((inner) => inner.id === 1); setFileredData(result1); } const handle2 = () => { const result2 = fetchData.filter((inner) => inner.id === 2); setFileredData(result2); } const handleAll = () => { setFileredData(fetchData); } return ( <div> <button onClick={handleAll}>Show all</button> <button onClick={handle1}>Filter by id 1</button> <button onClick={handle2}>Filter by id 2</button> {renderdata()} </div> ); }