时间戳

首页 > 解决方案 > React 设置状态条件（如果是 else 或三元）不起作用。（即使是假的也能工作）

reactjs - React 设置状态条件（如果是 else 或三元）不起作用。（即使是假的也能工作）

问题描述

我正在 React 中提出工作清单挑战。

我正在尝试添加一个过滤器以根据我们的选择仅显示一些属性。

目标是单击右侧的组件之一。（见附图）该组件将显示在顶部栏中，以了解我们单击了哪个组件。在这里，它是“前端”。如您所见，顶部栏中有多个“前端”，因为我多次单击它

浏览器图片 部署在vercel这里https://static-job-list-in-react.vercel.app/

我试图创造一个条件来避免这种情况。

为此，我用 [onFilter, setOnFilter] 创建了一个钩子

但无论我尝试哪种方式，if else 语句都不起作用。

const Container = () => {

    const[onFilter, setOnFilter] = useState([]);
    /*const[word, setWord] = useState([]);*/

    const onClickBtn = (e) => {

        let ok = onFilter.indexOf(<span className="filtered">{e.target.innerText}</span>);
        const update = [...onFilter, <span className="filtered">{e.target.innerText}</span>];

        if(ok===-1){
            setOnFilter(update)
        }
        
        
            }

    return (
        
        <div className="container">
        <div className="filter">
        {onFilter.map(e=> e)}
            <button className="clear">
            
            Clear
            </button>
        </div>
            <Card datas={Datas} onClickBtn={onClickBtn}/>
        </div>
    );
};

Github 仓库在这里https://github.com/AnthoVDO/Front_End_Mentor--Challenge/blob/master/static-job-listings-react/src/components/Container.js

我尝试用 5 到 6 种不同的方式编写函数。

我阅读了文档，即使这样，我也不明白。

标签： reactjsif-statementreact-hooksconditional-statementsstate

解决方案

您的问题是它<span className="filtered">{e.target.innerText}</span>被转换为一个对象，因此无法与之进行比较indexOf（因为您正在比较对象的引用）。

解决方案是仅将过滤器的名称存储在您的状态中，因为它是一个可以按值与 进行比较的字符串，并将您的indexOf写入函数中。<span>map

import React from "react";
import Card from "./Card";
import Datas from "../data.json";
import { useState } from "react";

const Container = () => {
  const [onFilter, setOnFilter] = useState([]);
  /*const[word, setWord] = useState([]);*/

  const onClickBtn = (e) => {
    let ok = onFilter.indexOf(e.target.innerText);

    if (ok === -1) {
      setOnFilter((previousFilter) => [...previousFilter, e.target.innerText]);
    }
  };

  return (
    <div className="container">
      <div className="filter">
        {onFilter.map(filter => (
          <span className="filtered" key={filter}>
            {filter}
          </span>
        ))}
        <button className="clear">Clear</button>
      </div>
      <Card datas={Datas} onClickBtn={onClickBtn} />
    </div>
  );
};

export default Container;

推荐阅读