javascript - 如何在 React 中过滤 API 和 setState 中的 JSON 数据

Question

单击过滤器按钮后，第一个过滤器返回正确的数据，但当调用第二个过滤器方法时，状态数组会发生变化(或被破坏？)。我对每个函数都使用 setState，但无法弄清楚为什么数组的初始状态没有恢复。

当我导入 JSON 数据的本地副本时，此应用程序正在运行。注释代码块确实表明过滤器函数适用于本地数据，但不适用于从我的服务器的 fetch 方法返回的相同 JSON 数据。

import React from "react";
import { Button, Row, Col } from "react-bootstrap";
import AutoList from './AutoList';
// import autoData from '../autoData.json';

const API = "https://MY_SERVER/autoData.json";

class GetAutos extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      autos: [],
    };
  }

  fetchAutoData() {
      fetch(API)
        .then(autoData => autoData.json())
        .then(autoData =>
            this.setState({
                autos: autoData, 
                isLoading: false,
            })
        )
        .catch(error => this.setState({ error, isLoading: false }));

  }

  componentDidMount() {
      this.fetchAutoData();
      // this.setState(() => ({ autos: autoData }));
  }


  render() {

    const { autos } = this.state;

    let onResetArray = () => {
        this.setState({ autoData: this.state.autos })
        //console.log(autos)
      }

    let filterFord = () => {
        const fordAutos = autos.filter( (auto) => auto.title.includes("Ford"));
        // const fordAutos = autoData.filter( (auto) => auto.title.includes("Ford"));

        this.setState({ autos: fordAutos });
    }


    let filterChevy = () => {
        const chevyAutos = autos.filter( (auto) => auto.title.includes("Chevrolet"));
        // const chevyAutos = autoData.filter( (auto) => auto.title.includes("Chevrolet"));

        this.setState({ autos: chevyAutos });
    }

    let filterJeep = () => {
        const jeepAutos = autos.filter( (auto) => auto.title.includes("Jeep"));
        // const jeepAutos = autoData.filter( (auto) => auto.title.includes("Jeep"));

        this.setState({ autos: jeepAutos });
    }
    return (
        <div className="container">
            <Row className="mb-4">
                <Col>
                    <Button event-key="reset-autos" onClick={onResetArray}>All Cars</Button>
                </Col>
                <Col>
                    <Button event-key="ford-autos" onClick={filterFord}>Filter Ford</Button>
                </Col>
                <Col>
                    <Button event-key="chevy-autos" onClick={filterChevy}>Filter Chevy</Button>
                </Col>
                <Col>
                    <Button event-key="jeep-autos" onClick={filterJeep}>Filter Jeep</Button>
                </Col>
            </Row>


        <AutoList autos={ this.state.autos } />
        </div>

    );
  }
}
export default GetAutos;

我希望随后单击按钮来过滤状态中的数据集。相反，单击会过滤由 .filter() 方法创建的数组。我的代码适用于 JSON 数据的本地导入，但不适用于提取的 JSON。

Answer 1

当您使用过滤结果设置状态时，您将从源中删除条目。您应该将过滤结果存储在不同的键中。

例如这样的事情。

const jeepAutos = autos.filter( (auto) => auto.title.includes("Jeep"))
this.setState({
  filteredAutos: jeepAutos
})

然后在渲染时你会像这样使用它

<AutoList autos={ this.state.filteredAutos } />

请记住，最初filteredAutos将为空，因此要查看全部，您需要在传递之前检查过滤的项目

<AutoList autos={ filteredAutos.length > 0 ? filteredAutos : autos } />

Simple example to play with