Фильтр с несколькими флажками и получением данных с помощью React ⇐ Javascript

[Anonymous]

Я пытаюсь реализовать фильтр с флажками, у меня есть мои данные в файле JSON.
Я получаю свои данные из json
это выглядит так: < /p>

Код: Выделить всё

  "subjects": [
{
"año_cuatri": "1° 1°",
"codigo": "1.1.1",
"nombre": "Técnicas de Programación",
"estado": "Promocionada",
"año_cursada": "2024 2°C",
"nota": 8,
"tiene_apuntes": true,
"link_apuntes": "111_tecnicas_de_programacion"
},
...
]}
< /code>
Я пытаюсь сделать его, и все в порядке, но когда я реализую фильтры с флажками, у меня возникают проблемы. Я не могу отфильтровать данные и повторно заполнить данные фильтра.
Вы не могли бы помочь мне?const Materias_List = () => {
const [dataApi, setDataApi] = useState([])

const [estadoChecked, setEstadoChecked] = useState({
materia_promocionada: false,
materia_pendiente: false,
materia_cursando: false,
materia_tiene_apuntes: false,
})

let api_subjects = [];
let api_subjects_filtered = [];

const fetchData = async () => {
try {
api_subjects = await degree_in_software_development.subjects
setDataApi(api_subjects)
}
catch (e) {
console.log("Error al consumir API", e);
}
finally {
console.log("FINALLY api_subjects", api_subjects);
console.log("FINALLY dataApi", dataApi);
console.log("Finalizó la carga");
}
}

const handleOnChange = async (e) => {
console.log("handleOnChange", e); // e: SyntheticBaseEvent {} > target: input#materia_cursando > checked: true||false

console.log("estadoChecked", estadoChecked);
setEstadoChecked({...estadoChecked, [e.target.name]: e.target.checked })
console.log("estadoChecked", estadoChecked);
console.log("e.target.checked", e.target.checked);
console.log("e.target.value", e.target.value);
console.log("e.target.name", e.target.name);
}

useEffect(() => {
fetchData()
console.log("useEffect", api_subjects);
console.log("useEffect dataApi", dataApi);
}, [])

return (


Filtrar por:


Promocionada




Pendiente




Cursando




Tiene apuntes


[list]
{
dataApi.map((subject) =>  {
return (


{subject.estado}
[h4]{subject.nombre}[/h4]
{
(!(subject.tiene_apuntes))
?

Código: {subject.codigo}

: ((subject.tiene_apuntes) && (subject.link_apuntes))
?

Código: {subject.codigo}

[url={`${basePath}${subject.link_apuntes}`} target=]
📚 Apuntes
[/url]


: null
}


)
})}
[/list]


)
}





const Materias_List = () => {
const [dataApi, setDataApi] = useState([])

const [estadoChecked, setEstadoChecked] = useState({
materia_promocionada: false,
materia_pendiente: false,
materia_cursando: false,
materia_tiene_apuntes: false,
})

let api_subjects = [];
let api_subjects_filtered = [];

const fetchData = async () => {
try {
api_subjects = await degree_in_software_development.subjects
setDataApi(api_subjects)
}
catch (e) {
console.log("Error al consumir API", e);
}
finally {
console.log("FINALLY api_subjects", api_subjects);
console.log("FINALLY dataApi", dataApi);
console.log("Finalizó la carga");
}
}

const handleOnChange = async (e) => {
console.log("handleOnChange", e); // e: SyntheticBaseEvent {} > target: input#materia_cursando > checked: true||false

console.log("estadoChecked", estadoChecked);
setEstadoChecked({...estadoChecked, [e.target.name]: e.target.checked })
console.log("estadoChecked", estadoChecked);
console.log("e.target.checked", e.target.checked);
console.log("e.target.value", e.target.value);
console.log("e.target.name", e.target.name);
}

useEffect(() =>  {
fetchData()
console.log("useEffect", api_subjects);
console.log("useEffect dataApi", dataApi);
}, [])

return (


Filtrar por:


Promocionada




Pendiente




Cursando




Tiene apuntes


[list]
{
dataApi.map((subject) => {
return (


{subject.estado}
[h4]{subject.nombre}[/h4]
{
(!(subject.tiene_apuntes))
?

Código: {subject.codigo}

: ((subject.tiene_apuntes) &&  (subject.link_apuntes))
?

Código: {subject.codigo}

[url={`${basePath}${subject.link_apuntes}`} target=]
📚 Apuntes
[/url]


: null
}


)
})}
[/list]


)
}

Спасибо за ваше время!

Подробнее здесь: https://stackoverflow.com/questions/796 ... with-react