По сути, у меня есть массив проектов (объектов) с их именами и используемыми технологиями (это другой массив). Я пытаюсь отфильтровать проекты в зависимости от того, какая кнопка нажата. Например, если пользователь нажимает кнопку «React», он должен отображать только те проекты, в наборе технологий которых есть «React». Если пользователь нажимает кнопку «Все», он должен отображать все проекты. Вот код, который у меня есть:
const projects = [
{
name: 'Poject 1',
technologies: ['React', 'Gatsby']
},
{
name: 'Project 2',
technologies: ['HTML', 'Node.js']
},
{
name: 'Project 3',
technologies: ['React', 'Node.js']
},
{
name: 'Project 4',
technologies: ['HTML', 'CSS']
}
]
const displayProjects = () => {
const [tech, setTech] = useState('')
const filteredProjects = projects.filter((project) => {
return project.technologies.some(t => t === tech)
})
return (
<button>All</button>
<button onClick = {() => setTech(tech === 'React')}>React</button>
<button onClick = {() => setTech(tech === 'HTML')}>HTML</button>
{filteredProjects.map(function (filteredProject) {
return (
<div>
{filteredProject.name}
</div>
)
})}
)
}
Я понимаю, что что-то упустил в своем коде, но чувствую, что близок к решению. Любые предложения очень ценятся.
Выход приложения:
Вы должны установить состояние следующим образом:
<button onClick = {() => setTech('React')}>React</button>
<button onClick = {() => setTech('HTML')}>HTML</button>
полный рабочий код приложения:
import React, { useState, useEffect } from "react";
import Axios from "axios";
import "./style.css";
import React from "react";
const projects = [
{
name: "Poject 1",
technologies: ["React", "Gatsby"]
},
{
name: "Project 2",
technologies: ["HTML", "Node.js"]
},
{
name: "Project 3",
technologies: ["React", "Node.js"]
},
{
name: "Project 4",
technologies: ["HTML", "CSS"]
}
];
const App = () => {
const [tech, setTech] = useState("");
const filteredProjects =
tech === ""
? projects
: projects.filter(project => project.technologies.includes(tech));
return (
<>
<button onClick = {() => setTech("")}>All</button>
<button onClick = {() => setTech("React")}>React</button>
<button onClick = {() => setTech("HTML")}>HTML</button>
{filteredProjects.map(function(filteredProject) {
return <div>{filteredProject.name}</div>;
})}
</>
);
};
export default App;
живое рабочее приложение: stackblitz
"Я не классный, ты классный" - Всемогущий Киану Ривз :)
Я действительно думаю, что единственная проблема, с которой вы столкнулись, это то, что ваши функции настройки состояния вызываются неправильно. Это должно быть так:
<button onClick = {() => setTech('React')}>React</button>
<button onClick = {() => setTech('HTML')}>HTML</button>
В настоящее время вы устанавливаете tech
либо на true
, либо на false
(результат операций сравнения идентификаторов)!
Потрясающее количество усилий, вложенных в этот ответ! :)