在 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>
);

演示

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