javascript - 如何从 React 中从另一个数组对象创建的数组中过滤？

Question

我有显示到 dom 中的 JSON 本地数据，然后我创建了一个新数组（标签），在其中存储了原始数据（数据）中的一些元素，以使用它们过滤状态（数据） Onclick 事件，我使用了 filter 函数，但是当我调试该函数时，它返回了一个元素本身的数组。

你们觉得怎么样？

PS：我是 React 的初学者

<--应用比较-->

import "./App.scss";
import datas from "./data.json";
import CardList from "./components/CardList/CardList";
import Header from "./components/Header/Header";


const App = () => {
  return (
    <div className="App">
      <Header />
      <CardList datas={datas} />
    </div>
  );
};

export default App;

<--CardList Comp-->

import Card from "../Card/Card";
import "./CardList.scss";
import React,{useState} from "react";

const CardList = (props) => {

  return (
    <ul className="CardList">
      {props.datas.map((data) => {
        const tags = [data.role, data.level, ...data.languages, ...data.tools];
        
        return (
          <Card
            key={data.id}
            company={data.company}
            logo={data.logo}
            new={data.new}
            featured={data.featured}
            position={data.position}
            postedAt={data.postedAt}
            contract={data.contract}
            tags={tags}
            filterTag= {filterTag}
          />
        );
      })}
    </ul>
  );
};

export default CardList;

<--卡片比较-->

import "./Card.scss";
import React,{useState} from "react";


const Card = (props) => {
  const [jobs, setJobs] = useState(props.datas);

  const filterTag  = (tag) => {
    const newJob = jobs.filter((job)=> job.tag === tag);
    console.log(newJob);
    setJobs(newJob);
  }

  return (
    
    <li key={props.id} className="Card">
      <div className="image">
        <img src={props.logo} alt={`${props.company} logo`} />
      </div>
      <div className="content">
        <span className="company">{props.company}</span>
        {props.new && <span className="new">New!</span>}
        {props.featured && <span className="featured">Featured</span>}
        <h2>{props.position}</h2>
        <ul>
          <li>{props.postedAt}</li>
          <li>{props.contract}</li>
          <li>{props.location}</li>
        </ul>
      </div>
      <ul className="tags">
        {props.tags.map((tag, index) => {
          return <li key={index} onClick={()=> filterTag(tag)}>{tag}</li>;
        })}
      </ul>
    </li>
  );
};

export default Card;

<--数据-->

[
  {
    "id": 1,
    "company": "Photosnap",
    "logo": "./images/photosnap.svg",
    "new": true,
    "featured": true,
    "position": "Senior Frontend Developer",
    "role": "Frontend",
    "level": "Senior",
    "postedAt": "1d ago",
    "contract": "Full Time",
    "location": "USA Only",
    "languages": ["HTML", "CSS", "JavaScript"],
    "tools": []
  },
  {
    "id": 2,
    "company": "Manage",
    "logo": "./images/manage.svg",
    "new": true,
    "featured": true,
    "position": "Fullstack Developer",
    "role": "Fullstack",
    "level": "Midweight",
    "postedAt": "1d ago",
    "contract": "Part Time",
    "location": "Remote",
    "languages": ["Python"],
    "tools": ["React"]
  },
  {
    "id": 3,
    "company": "Account",
    "logo": "./images/account.svg",
    "new": true,
    "featured": false,
    "position": "Junior Frontend Developer",
    "role": "Frontend",
    "level": "Junior",
    "postedAt": "2d ago",
    "contract": "Part Time",
    "location": "USA Only",
    "languages": ["JavaScript"],
    "tools": ["React", "Sass"]
  }
]

标签： javascriptreactjs

Answer 1

所以基本上过滤器总是返回一个数组。您需要从该数组中返回第一个选定的对象（最终只是索引 0 处的一个对象）。因此，请执行以下操作：

  const filterTag  = (tag) => {
    const newJob = jobs.filter((job)=> job.tag === tag);
    console.log(newJob[0]);
    setJobs(newJob[0]); // This you need to do
  }