大家好，我想问一下关于React中的过滤器的问题

Question

嗨，大家好，我点击了复选框，即使我点击了第二个复选框，我也没有得到任何值，我想知道解决它的问题，谢谢。当它过滤时，我在点击第二个复选框输入后出现，我尝试搜索它，但是你没有找到灵魂。问题是当我单击复选框值未出现时，我必须再次单击才能显示以前的值。

import React, { useState } from "react";
import { Item } from "./Item";
export default function Products() {
  const [product, setproduct] = useState(Item);
  const [checkboxvalue, setcheckboxvalue] = useState([]);
  let arrproduct = product.map((el) => {
    return (
      <div className="col-lg-3 col-md-4">
        <div className="content bg-danger">
          <img src={el.img} className="w-100" style={{ height: "200px" }}></img>
          <div className="text p-5">
            <h5>name: {el.name}</h5>
            <h5>type: {el.type}</h5>
            <h5>color: {el.color}</h5>
            <h5>price: {el.price}</h5>
          </div>

     </div>
    );
  });


  function handlecheckbox(e) {
    const { value, checked } = e.target;

    if (checked) {
      setcheckboxvalue((pre) => [...pre, value]);
    } else {
      setcheckboxvalue((pre) => {
        return [...pre.filter((i) => i === value)];
      });
    }

   
    setproduct(
      Item.filter((i) => {
        return checkboxvalue.includes(i.color) || checkboxvalue.includes("all");
      })
    );
  }

  return (
    <div>
      <h1>products</h1>
      <div className="btn-container">
        <button
          onClick={() => {
            setproduct(Item);
          }}
        >
          All
        </button>
        <button
          onClick={() => {
            handlebtn("jeans");
          }}
        >
          Jeans
        </button>
        <button
          onClick={() => {
            handlebtn("t-shirt");
          }}
        >
          T-shirt
        </button>
        <button
          onClick={() => {
            handlebtn("shoes");
          }}
        >
          shoes
        </button>
        <button
          onClick={() => {
            handlebtn("jacket");
          }}
        >
          jacket
        </button>
      </div>
      <div className="checkbox-input">
        <label>
          <input type="checkbox" value="all" onChange={handlecheckbox} />
          All
        </label>
        <label>
          <input type="checkbox" value="blue" onChange={handlecheckbox} />
          Blue
        </label>
        <label>
          <input type="checkbox" value="black" onChange={handlecheckbox} />
          Black
        </label>
        <label>
          <input type="checkbox" value="white" onChange={handlecheckbox} />
          White
        </label>
        <label>
          <input type="checkbox" value="red" onChange={handlecheckbox} />
          Red
        </label>
      </div>
      <div className="container">
        <div className="row g-3">{arrproduct}</div>
      </div>
    </div>
  );
}

Answer 1

你有一个关于 React 和 JavaScript 基础知识的经典错误。

  function handlecheckbox(e) {
    const { value, checked } = e.target;

    if (checked) {
      setcheckboxvalue((pre) => [...pre, value]);
    } else {
      setcheckboxvalue((pre) => {
        return [...pre.filter((i) => i === value)];
      });
    }

   
    setproduct(
      Item.filter((i) => {
        return checkboxvalue.includes(i.color) || checkboxvalue.includes("all");
      })
    );
  }

在 JavaScript 和 React 中，setcheckboxvalue 会更改下一次渲染的值。当您调用 setcheckboxvalue 时，checkboxvalue 不会神奇地出现。 React 中的状态在渲染组件时更新，这是新值可用的时间。

要解决此问题，您需要在处理程序外部使用过滤器。您不需要更改 setproduct 的状态。您的 Items 是静态的，因此您根本不需要其他 useState 。稍后需要修改时再添加。

export default function Products() {
  const [checkboxvalue, setcheckboxvalue] = useState([]);
  const product = Item.filter((i) => {
     return checkboxvalue.includes(i.color) || checkboxvalue.includes("all");
  });

  let arrproduct = .map((el) => {
    return (
      <div className="col-lg-3 col-md-4">
        <div className="content bg-danger">
          <img src={el.img} className="w-100" style={{ height: "200px" }}></img>
          <div className="text p-5">
            <h5>name: {el.name}</h5>
            <h5>type: {el.type}</h5>
            <h5>color: {el.color}</h5>
            <h5>price: {el.price}</h5>
          </div>

     </div>
    );
  });

  function handlecheckbox(e) {
    const { value, checked } = e.target;

    if (checked) {
      setcheckboxvalue((pre) => [...pre, value]);
    } else {
      setcheckboxvalue((pre) => {
        return [...pre.filter((i) => i === value)];
      });
    }

   
    setproduct(
      Item.filter((i) => {
        return checkboxvalue.includes(i.color) || checkboxvalue.includes("all");
      })
    );
  }