如何修复 React 上的产品过滤？

叶夫尼

我有反应组件：

主要的.jsx

import React from "react";
import { Products } from "../Products";
import { Filter } from "../Filter";

class Main extends React.Component {
  state = {
    products: [],
    filteredProducts: [],
    status: "all",
  };

  onFilterStatusChange = (status) => {
    this.setState({ status });
  };

  componentDidMount() {
    fetch("./products.json")
      .then((responce) => responce.json())
      .then((data) => this.setState({ products: Object.values(data) }));
  }

  filterProducts() {
    this.setState(({ status }) => ({
      filteredProducts:
        status === "all"
          ? this.state.products
          : this.state.products.filter((n) => n.prod_status?.includes(status)),
    }));
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.state.status !== prevState.status ||
      this.state.products !== prevState.products
    ) {
      this.filterProducts();
    }
  }

  render() {
    return (
      <main className="container content">
        <Filter
          values={[
            "all",
            "recommended",
            "promotion",
            "saleout",
            "bestseller",
            "new",
          ]}
          value={this.state.status}
          onChange={this.onFilterStatusChange}
        />
        <Products products={this.state.filteredProducts} />
      </main>
    );
  }
}

export { Main };

过滤器.jsx

import statusMap from "../statusMap";

const Filter = ({ values, value, onChange }) => (
  <div className="row filter_container">
    <h3 className="filter_title">Sortować według</h3>
    <div className="input-field col s12">
      <select className="status_select">
        {values.map((n) => (
          <option onChange={() => onChange(n)} value={value === n} key={n}>
            {statusMap.get(n)}
          </option>
        ))}
      </select>
    </div>
  </div>
);

export { Filter };

问题是选择不响应值的变化，因此不显示过滤的产品。我想我搞砸了属性

过滤器用于类型="radio"。在我尝试重做过滤器（将 type="radio" 更改为）后，他停止了工作。这是 Filter.jsx 在更改为 select 之前的样子：

{values.map((n) => (
        <label>
          <input
            className="with-gap"
            type="radio"
            onChange={() => onChange(n)}
            checked={value === n}
          />
          <span>{statusMap.get(n)}</span>
        </label>
      ))}

请帮我修复这个过滤器

阿隆·巴伦博伊姆

您的代码中有几个问题：

该onChange事件是在select元素上触发的，而不是在option元素上触发的。
value={value === n}，根据您的代码，value是一个字符串，我假设它代表的默认值select，并且n是 map 函数中的当前值，这意味着 value 属性是一个布尔值，但您需要它是每个值的唯一值选项。至于默认选择值 - 在 React 中您可以使用该selected属性
我还建议您使用该key属性的索引。

我对您的代码进行了一些调整以尝试解决您的问题，或者至少帮助您找到它。我无法测试它，因为我没有statusMap你的所以它。

import React from "react";

class App extends React.Component {
  state = {
    products: [],
    filteredProducts: [],
    status: "all",
  };

  onFilterStatusChange = (status) => {
    this.setState({ status });
  };

  componentDidMount() {
    fetch("./products.json")
      .then((responce) => responce.json())
      .then((data) => this.setState({ products: Object.values(data) }));
  }

  filterProducts() {
    this.setState(({ status }) => ({
      filteredProducts:
        status === "all"
          ? this.state.products
          : this.state.products.filter((n) => n.prod_status?.includes(status)),
    }));
  }

  componentDidUpdate(prevProps, prevState) {
    if (
      this.state.status !== prevState.status ||
      this.state.products !== prevState.products
    ) {
      this.filterProducts();
    }
  }

  render() {
    return (
      <main className="container content">
        <Filter
          values={[
            "all",
            "recommended",
            "promotion",
            "saleout",
            "bestseller",
            "new",
          ]}
          value={this.state.status}
          onFilterChange={this.onFilterStatusChange}
        />
        <Products products={this.state.filteredProducts} />
      </main>
    );
  }
}

export { App };


const Filter = ({ values, currentValue, onFilterChange }) => (
  <div className='row filter_container'>
    <h3 className='filter_title'>Sortować według</h3>
    <div className='input-field col s12'>
      <select
        className='status_select'
        onChange={(e) => onFilterChange(e.target.value)}
        selected={currentValue}
      >
        {values.map((val, index) => (
          <option value={val} key={index}>
            {statusMap.get(val)}
          </option>
        ))}
      </select>
    </div>
  </div>
);