在 React 中使用按鈕過濾數據

Question

我正在嘗試使用按鈕來過濾 JSON 中的數據。 每當單擊按鈕時，它將使用過濾后的 JSON 數據更新狀態。 然后它將返回包含更新數據的列表。 現在我有四個按鈕來過濾四種不同的“類型”，但代碼根本不起作用。

import React, { useState, useEffect } from 'react';
import * as moment from 'moment';

import PollCard from './PollCard'

function PollList() {

    const [polls, setPolls] = useState(null);
    const [loading, setLoading] = useState(false);
    const range = 30
    var dateRange = moment().subtract(range, 'days').calendar();

    async function fetchMyAPI() {
        let response = await fetch(url)
        const json = await response.json()
        var data = json.filter(e => Date.parse(e.endDate) >= Date.parse(dateRange))
        setPolls(data.reverse())
        setLoading(true);

    }

    useEffect(() => {
        fetchMyAPI();
    }, [])

    if (!loading) {
        return ("Loading...")
    }

    var A = polls.filter(e => e.type === "A")
    var B = polls.filter(e => e.type === "B")
    var C = polls.filter(e => e.type === "C")    


    function showA() {
        setPolls(A)
    }

    function showB() {
        setPolls(B)
    }

    function showC() {
        setPolls(C)
    }

    return (
        <div className="polls">
            <button onClick={showA()}>A</button>
            <button onClick={showB()}>B</button>
            <button onClick={showC()}>C</button>

            {
                polls && polls.map((poll) => (
                    <div key={poll.id}>
                        <PollCard poll={poll} />
                        <hr style={{ opacity: '.1' }} />
                    </div>

                ))
            }
        </div>

    );
}

export default PollList;

Answer 1

您需要兩個數組來正確過濾數據，當您單擊其中一個按鈕時，它會覆蓋原始數據。 將<button onClick={showA()}>A</button>更改為<button onClick={() => showA()}>A</button>

// get data from api, won't change
const [polls, setPolls] = useState(null);
// used for displaying polls and filtering
const [filteredPolls, setfilteredPolls] = useState(null)

過濾數據

var A = polls.filter(e => e.type === "A")
var B = polls.filter(e => e.type === "B")
var C = polls.filter(e => e.type === "C")    


function showA() {
    setfilteredPolls(A)
}

function showB() {
    setfilteredPolls(B)
}

function showC() {
    setfilteredPolls(C)
}

顯示數據

return (
  <div className="polls">
    <button onClick={() => showA()}>A</button>
    <button onClick={() => showB()}>B</button>
    <button onClick={() => showC()}>C</button>

    {
      filteredPolls && filteredPolls.map((poll) => (
        <div key={poll.id}>
          <PollCard poll={poll} />
          <hr style={{ opacity: '.1' }} />
        </div>

      ))
    }
  </div>
);

演示

 <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script> <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> <div id="root"></div> <script type="text/babel"> class PollCard extends React.Component { render() { return ( <div>{`${this.props.poll.name} - ${this.props.poll.type}`}</div> ) } } const dpolls = [ { id: 4, type: 'C', name: 'Test 1' }, { id: 6, type: 'B', name: 'Test 2' }, { id: 7, type: 'A', name: 'Test 3' }, { id: 8, type: 'A', name: 'Test 9' }, { id: 17, type: 'B', name: 'Test 39' } ] function PollList() { const [polls, setPolls] = React.useState(null); const [filteredPolls, setfilteredPolls] = React.useState(null) const [loading, setLoading] = React.useState(false); const range = 30 // var dateRange = moment().subtract(range, 'days').calendar(); async function fetchMyAPI() { let response = await fetch('https://api.themoviedb.org/3/movie/upcoming?api_key=81f382d33088c6d52099a62eab51d967&language=en-US&page=1') const json = await response.json() // var data = json.filter(e => Date.parse(e.endDate) >= Date.parse(dateRange)) setPolls(dpolls); setfilteredPolls(dpolls.filter(e => e.type === "A")); setLoading(true); } React.useEffect(() => { fetchMyAPI(); }, []) if (!loading) { return ("Loading...") } var A = polls.filter(e => e.type === "A") var B = polls.filter(e => e.type === "B") var C = polls.filter(e => e.type === "C") function showA() { setfilteredPolls(A) } function showB() { setfilteredPolls(B) } function showC() { setfilteredPolls(C) } function removeFiter() { setfilteredPolls(polls); } return ( <div className="polls"> <button onClick={() => showA()}>A</button> <button onClick={() => showB()}>B</button> <button onClick={() => showC()}>C</button> <button onClick={() => removeFiter()}>Remove Filter</button> { filteredPolls && filteredPolls.map((poll) => ( <div key={poll.id}> <PollCard poll={poll} /> <hr style={{ opacity: '.1' }} /> </div> )) } </div> ); } class App extends React.Component { constructor() { super(); this.state = { name: 'React' }; } render() { return ( <div> <PollList /> </div> ); } } ReactDOM.render(<App />, document.getElementById('root')); </script>