reactjs 我试图过滤数组的对象(课程)与数组的唯一数据(标签)使用复选框按钮使用React挂钩,它不工作

我试图过滤对象（课程）数组与数组的唯一数据（标签）使用复选框按钮使用React挂钩。它不工作。在开始时，它显示所有的列表，但当我选择标签一个接一个，它被添加到下面的列表。你应该看到所有的列表第一，但选择标签后，它应该只显示perticular标签数据。我该如何实现这一点？

请在下面找到我的代码：

import React, { useState } from "react";

const courses = [
{ id: "1", course: "React Tutorial", tag: "react" },
{ id: "2", course: "Object-oriented programming (OOP)", tag: "oop" },
{ id: "3", course: "Java Programming", tag: "java" },
{ id: "4", course: "JavaScript Course", tag: "javascript" },
{ id: "5", course: "Spring Boot Tutorial", tag: "spring" },
{ id: "6", course: "Python Bootcamp", tag: "python" },
{ id: "7", course: "Spring Framework Course", tag: "spring" },
{ id: "8", course: "React with Redux", tag: "react" },
{ id: "9", course: "C#: Classes and OOP", tag: "oop" },
{ id: "10", course: "Java Masterclass", tag: "java" },
{ id: "11", course: "ES6 JavaScript Training", tag: "javascript" },
{ id: "12", course: "Learn Python Programming", tag: "python" },
];
const uniqueTags = [...new Set(courses.map((item) => item.tag))];

const App = () => {
const [checked, setChecked] = useState<any>([]);
const [filterData, setFilterData] = useState(courses);

const handleFilterItems = (event: any, tag: any) => {
setFilterData([]);
if (event.target.checked) {
  setChecked([...checked, tag]);
  const addedData = courses.filter((item) => item.tag === tag);
  setFilterData([...filterData, ...addedData]);
} else {
  const removedData = filterData.filter((item) => item.tag !== tag);
  setFilterData(removedData);
  setChecked(checked.filter((item: any) => item !== tag));
}
};

return (
<div style={{ textAlign: "center" }}>
  {uniqueTags.map((tag, index) => (
    <label key={index}>
      <input
        type="checkbox"
        checked={checked.includes(tag)}
        onChange={(event) => handleFilterItems(event, tag)}
      />
      {tag}
    </label>
  ))}
  <hr />
  {filterData.map((course) => (
    <li key={course.id}>
      {course.id}-{course.course}-{course.tag}
    </li>
  ))}
</div>
);
};

export default App;

您需要更改两行：

import React, { useState } from "react";

const courses = [
{ id: "1", course: "React Tutorial", tag: "react" },
{ id: "2", course: "Object-oriented programming (OOP)", tag: "oop" },
{ id: "3", course: "Java Programming", tag: "java" },
{ id: "4", course: "JavaScript Course", tag: "javascript" },
{ id: "5", course: "Spring Boot Tutorial", tag: "spring" },
{ id: "6", course: "Python Bootcamp", tag: "python" },
{ id: "7", course: "Spring Framework Course", tag: "spring" },
{ id: "8", course: "React with Redux", tag: "react" },
{ id: "9", course: "C#: Classes and OOP", tag: "oop" },
{ id: "10", course: "Java Masterclass", tag: "java" },
{ id: "11", course: "ES6 JavaScript Training", tag: "javascript" },
{ id: "12", course: "Learn Python Programming", tag: "python" },
];
const uniqueTags = [...new Set(courses.map((item) => item.tag))];

const App = () => {
const [checked, setChecked] = useState([]);
const [filterData, setFilterData] = useState(courses);

const handleFilterItems = (event: any, tag: any) => {
setFilterData([]);
if (event.target.checked) {
  setChecked([...checked, tag]);
  const addedData = courses.filter((item) => item.tag === tag);
  setFilterData([...addedData]); <------------ this line
} else {
  const removedData = courses.filter((item) => item.tag !== tag); <--this line
  setFilterData(removedData);
  setChecked(checked.filter((item: any) => item !== tag));
}
};

return (
<div style={{ textAlign: "center" }}>
  {uniqueTags.map((tag, index) => (
    <label key={index}>
      <input
        type="checkbox"
        checked={checked.includes(tag)}
        onChange={(event) => handleFilterItems(event, tag)}
      />
      {tag}
    </label>
  ))}
  <hr />
  {filterData.map((course) => (
    <li key={course.id}>
      {course.id}-{course.course}-{course.tag}
    </li>
  ))}
</div>
);
};

export default App;

编辑：使用useEffect钩子

import React, { useState } from "react";

const courses = [
{ id: "1", course: "React Tutorial", tag: "react" },
{ id: "2", course: "Object-oriented programming (OOP)", tag: "oop" },
{ id: "3", course: "Java Programming", tag: "java" },
{ id: "4", course: "JavaScript Course", tag: "javascript" },
{ id: "5", course: "Spring Boot Tutorial", tag: "spring" },
{ id: "6", course: "Python Bootcamp", tag: "python" },
{ id: "7", course: "Spring Framework Course", tag: "spring" },
{ id: "8", course: "React with Redux", tag: "react" },
{ id: "9", course: "C#: Classes and OOP", tag: "oop" },
{ id: "10", course: "Java Masterclass", tag: "java" },
{ id: "11", course: "ES6 JavaScript Training", tag: "javascript" },
{ id: "12", course: "Learn Python Programming", tag: "python" },
];
const uniqueTags = [...new Set(courses.map((item) => item.tag))];

const App = () => {
const [checked, setChecked] = useState([]);
const [filterData, setFilterData] = useState(courses);

const handleFilterItems = (event: any, tag: any) => {
setFilterData([]);
if (event.target.checked) {
  setChecked([...checked, tag]);
  //const addedData = courses.filter((item) => item.tag === tag);
  //setFilterData([...addedData]); 
} else {
  //const removedData = courses.filter((item) => item.tag !== tag); 
  //setFilterData(removedData);
  setChecked(checked.filter((item: any) => item !== tag));
}
};

React.useEffect(() => {
  if(checked.length == 0){
    setFilterData([...courses])
  }else{
    let filtered = courses.filter((el:any) => checked.includes(el.tag))
    setFilterData([...filtered])
  }
 
},[checked])

return (
<div style={{ textAlign: "center" }}>
  {uniqueTags.map((tag, index) => (
    <label key={index}>
      <input
        type="checkbox"
        checked={checked.includes(tag)}
        onChange={(event) => handleFilterItems(event, tag)}
      />
      {tag}
    </label>
  ))}
  <hr />
  {filterData.map((course) => (
    <li key={course.id}>
      {course.id}-{course.course}-{course.tag}
    </li>
  ))}
</div>
);
};

export default App;

reactjs 我试图过滤数组的对象(课程)与数组的唯一数据(标签)使用复选框按钮使用React挂钩,它不工作

1条答案

相关问题

热门标签

最新问答