使用 onClick 过滤后反应重置状态

Question

我有一个基本的应用程序，它只是 returns 一些卡片，里面有一些内容，我有一些按钮，然后根据数据集中找到的值过滤返回的卡片。过滤器按钮确实可以单独使用，但是如果我一个接一个地单击过滤器，过滤器将应用于现在过滤的数据。如何确保过滤器应用于数据的初始状态，或者如何在应用过滤器之前将状态重置为所有内容？谢谢

parent.js

import './App.scss';
import DataThoughts from "./assets/data/DataThoughts";
import Thoughts from "./components/Thoughts";

function AppThoughts() {
    return (
        <div className="App">
            <main className={'bg-light'}>
                <div className={'container'}>
                    <Thoughts data={DataThoughts} />
                </div>
            </main>
        </div>
    );
}

export default AppThoughts;

Thoughts.js

import React, { Component } from 'react';
import FilterButton from "./FilterButton";

class Thoughts extends Component {

    constructor(props) {
        super(props);
        this.state = {...props};
    }

    handleClick = value => () => {
        let filtered = this.state.data.filter(item => item.Emotion === value);
        this.setState({ data: filtered });
        console.log(this.state.data);
    };

    render() {

        let data = this.state.data;
        let numberOfThoughts = data.length;

        let dataList = this.state.data.map((thought, i) =>
            <div className={`col-12 col-sm-12 col-md-6 ${i % 2 === 0 ? i % 3 === 0 ? 'col-lg-3 col-xl-3' : 'col-lg-5 col-xl-5' : 'col-lg-4 col-xl-4'}`} key={'thought'+i}>
                <div className="card mb-4">
                    {thought.Photo ? <img src={thought.Photo} className="card-img-top" alt={thought.Emotion}/> : ''}
                    <div className="p-5">
                        <blockquote className="blockquote mb-0">
                            <p className={'small text-muted'}>{thought.Date}</p>
                            <p className={`${i % 2 === 0 ? i % 3 === 0 ? 'display-6' : 'display-4' : 'display-5'} mb-4`}>{thought.Thought}</p>
                            <footer className="small text-muted">{thought.Author}, <cite title="Source Title">{thought.Location}</cite></footer>
                        </blockquote>
                    </div>
                </div>
            </div>
        );

        return (
            <section className="row section-row justify-content-start thoughts">
                <div className={`col-12`} key={'filters'}>
                    <FilterButton buttonText={"Happy"} onClick={this.handleClick('Happy')} />
                    <FilterButton buttonText={"Sad"} onClick={this.handleClick('Sad')} />
                    <FilterButton buttonText={"Thinking"} onClick={this.handleClick('Thinking')} />
                    <FilterButton buttonText={"All"} onClick={this.handleClick('All')} />
                </div>
                {dataList}
                <div className={`col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center`} key={'total'}>
                    <span className={'display-1'}>{numberOfThoughts}</span>
                </div>
            </section>
        );
    }
}

Thoughts.defaultProps = {
    Photo: '',
    Emotion:'Happy',
    Date:'Morning',
    Thought:'Default',
    Author:'Me',
    Location:'Somewhere'
};

export default Thoughts; // Don’t forget to use export default!

FilterButtons.js

import React, { Component } from 'react';

class FilterButton extends Component {
    render() {
        return (
            <button className={'btn btn-primary d-inline-block mb-4'} onClick={this.props.onClick}>{this.props.buttonText}</button>
        );
    }
}

export default FilterButton; // Don’t forget to use export default!

Answer 1

看起来初始数据来自道具。您可以使用 this.props 访问道具。所以你可以这样做：

handleClick = value => () => {
    // filter the initial data  
    let filtered = this.props.data.filter(item => item.Emotion === value);
    this.setState({ data: filtered });

    // set to initial data
    // this.setState({ ...this.props }); 
    console.log(this.state.data);
};

使用 onClick 过滤后反应重置状态

React reset state after filtering with onClick

javascript

state

filter

reactjs