过滤器无法正常工作，仅第一次反应其工作以及如何过滤真假

Question

这是我的代码https://stackblitz.com/edit/react-nsxxqp?file=src%2FApp.js和我的本地代码在这里如何过滤我不知道我是新的反应和 JavaScript 请帮帮我不知道如何完成我的任务。

import React, { useEffect, useState } from "react";
const Product = (props) => {
 const [allButtons, setAllButtons] = useState([]);
 const [product, setProduct] = useState([]);
 useEffect(() => {
     fetch("https://api.spacexdata.com/v3/launches?limit=100")
       .then(response => response.json())
       .then(productsList => {
         setProduct(productsList);
         setAllButtons(productsList);
       });
 }, []);
 const onBtnClick = (e) =>{
     setProduct(product.filter(i=>i.launch_year == e));
 };
 return(
 <div className="container-fluid">
       <div className="row">
         <div className="col-xl-12">
           <h2>SpacesX Launch Programme</h2>
         </div>
       </div>
       <div className="row">
         <div className="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-xs-12">
           <div className="inner">
             <p className="bold">Filter</p>
             <div className="col12 launchYear">
               <p className="marg0">Launch Year</p>
               {allButtons.map(productYr => (
                 <button 
                   className="btn btn-primary btnSpacex"
                   key={productYr.launch_year}
                   onClick={(e) => onBtnClick(productYr.launch_year)}
                 >
                   {productYr.launch_year}
                 </button>
               ))}
             </div>
             <div className="clearfix" />
             <div className="col12 launchYear">
               <p className="marg0">Successful Launch</p>
               <button className="btn btn-default btnSpacex">True</button>
               <button className="btn btn-default btnSpacex">False</button>
             </div>
             <div className="clearfix" />
             <div className="col12 launchYear">
               <p className="marg0">Successful Landing</p>
               <button className="btn btn-default btnSpacex">True</button>
               <button className="btn btn-default btnSpacex">False</button>
             </div>
           </div>
         </div>
         <div className="col-xl-10 col-lg-10 col-md-10 col-sm-10 col-xs-12 items1">
           <div className="row">
             {product.map(product => (
               <div
                 key={product.flight_number}
                 className="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-xs-12 marginBottom15"
               >
                 <div className="inner">
                   <img
                     src={product.links.mission_patch}
                     className="full-width imgBg"
                     alt={product.mission_name}
                   />
                   <div className="clearfix" />
                   <p className="productName bold margBot5">
                     {product.mission_name} #{product.flight_number}
                   </p>
                   <div className="clearfix" />
                   <p className="bold margBot5">
                     Mission Ids:
                     <ul className="marg0 blueClr">
                       <li>{product.mission_id}</li>
                     </ul>
                   </p>
                   <div className="clearfix" />
                   <p className="bold margBot5">
                     Launch Year:{" "}
                     <span className="normal blueClr">
                       {product.launch_year}
                     </span>
                   </p>
                   <div className="clearfix" />
                   <p className="bold margBot5">
                     Successful Launch:{" "}
                     <span className="normal blueClr">
                       {product.launch_success}
                     </span>
                   </p>
                   <div className="clearfix" />
                   <p className="bold margBot5">
                     Successful Landing:{" "}
                     <span className="normal blueClr">
                       {product.rocket.land_success}
                     </span>
                   </p>
                 </div>
               </div>
             ))}
           </div>
         </div>
       </div>
     </div>
 )
 }
export default Product

Answer 1

这里的主要问题是您的onButtonClick function。 将其更改为以下代码（而不是 product.filter，使用 allButtons.filter）：

const onBtnClick = e => {
    setProduct(allButtons.filter(i => i.launch_year == e));
};

问题是您拥有所有产品，然后当您选择第一个按钮时，您将产品设置为该按钮。 在下一次单击时，您将尝试仅过滤您在第一次单击中选择的单个产品。 为了解决这个问题，您希望过滤器始终位于 allButtons 列表中（我假设这只是您的一个小疏忽，看起来您完全知道自己要做什么，但只是不小心放错了列表在函数中）。

我将对您的代码进行的另一个小改动如下：（引入 index 参数并将其用作键）：

{allButtons.map((productYr, index) => (
    <button
        className="btn btn-primary btnSpacex"
        key={index}
        onClick={e => onBtnClick(productYr.launch_year)}
    >
        {productYr.launch_year}
    </button>
    ))
}

这将消除您因拥有重复键而收到的所有控制台警告。

Answer 2

检查下面的代码

import React, { useEffect, useState } from "react";

const Product = (props) => {
    const [allButtons, setAllButtons] = useState([]);
    const [launchSuccess, launchAllSuccess] = useState([]);
    const [landSuccess, landAllSuccess] = useState([]);
    const [product, setProduct] = useState([]);

    useEffect(() => {
        fetch("https://api.spacexdata.com/v3/launches?limit=100")
          .then(response => response.json())
          .then(productsList => {
            setProduct(productsList);
            setAllButtons(productsList);
            launchAllSuccess(productsList);
            landAllSuccess(productsList);
          });
    }, []);
    
    const onBtnClick = e => {
        setProduct(allButtons.filter(i => i.launch_year === e));
    };

    const onBtnLaunchAllSuccess = e =>{
        setProduct(launchSuccess.filter(i => i.launch_success === e));
    }

    const onBtnLandSuccessful = e =>{
        setProduct(landSuccess.filter(i => i.rocket.first_stage.cores[0].land_success === e));
    }

    return(
        <div className="container-fluid">
          <div className="row">
            <div className="col-xl-12">
              <h2>SpacesX Launch Programme</h2>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-xs-12">
              <div className="inner">
                <p className="bold">Filter</p>
                <div className="col12 launchYear">
                  <p className="marg0">Launch Year</p>
                  {allButtons.map((productYr, index) => (
                        <button
                            className="btn btn-primary btnSpacex"
                            key={index}
                            onClick={e => onBtnClick(productYr.launch_year)}
                        >
                            {productYr.launch_year}
                        </button>
                        ))
                    }

                </div>
                <div className="clearfix" />
                <div className="col12 launchYear">
                  <p className="marg0">Successful Launch</p>
                  <button 
                  onClick={e => onBtnLaunchAllSuccess(true)}
                  className="btn btn-default btnSpacex">True</button>
                  <button 
                  onClick={e => onBtnLaunchAllSuccess(false)} 
                  className="btn btn-default btnSpacex">False</button>
                </div>
                <div className="clearfix" />
                <div className="col12 launchYear">
                  <p className="marg0">Successful Landing</p>
                  <button 
                  onClick={e => onBtnLandSuccessful(true)}
                  className="btn btn-default btnSpacex">True</button>
                  <button 
                  onClick={e => onBtnLandSuccessful(false)}
                  className="btn btn-default btnSpacex">False</button>
                </div>


              </div>
            </div>
            <div className="col-xl-10 col-lg-10 col-md-10 col-sm-10 col-xs-12 items1">
              <div className="row">
                {product.map(product => (
                  <div
                    key={product.flight_number}
                    className="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-xs-12 marginBottom15"
                  >
                    <div className="inner">
                      <img
                        src={product.links.mission_patch}
                        className="full-width imgBg"
                        alt={product.mission_name}
                      />
                      <div className="clearfix" />
                      <p className="productName bold margBot5">
                        {product.mission_name} #{product.flight_number}
                      </p>
                      <div className="clearfix" />
                      <p className="bold margBot5">
                        Mission Ids:
                        <ul className="marg0 blueClr">
                          <li>{product.mission_id}</li>
                        </ul>
                      </p>
                      <div className="clearfix" />
                      <p className="bold margBot5">
                        Launch Year:
                        <span className="normal blueClr">
                          {product.launch_year}
                        </span>
                      </p>
                      <div className="clearfix" />
                      <p className="bold margBot5">
                        Successful Launch:
                        <span className="normal blueClr">
                          {product.launch_success}
                        </span>
                      </p>
                      <div className="clearfix" />
                      <p className="bold margBot5">
                        Successful Landing:
                        <span className="normal blueClr">
                          {product.rocket.first_stage.cores[0].land_success}
                        </span>
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
    )
}

export default Product