【发布时间】：2021-05-09 09:56:25
【问题描述】：
我在 React.js 中得到了这个组件，当我点击一个按钮时，它会进行不同类型的过滤，这是我的代码：
import React, { useContext } from 'react';
import { ModelsContext } from "../context/ModelsContext";
const FilterNav = () => {
const { modelos, guardarModelo } = useContext(ModelsContext);
const filterSegment = e => {
const segment = modelos.filter(modelo => modelo.segment === e.target.name);
guardarModelo(segment);
}
return (
<nav className="filter-container">
<div className="container">
<h3 className="filter-element-title">Filtrar por</h3>
<button type="button" className="filter-element">Todos</button>
<button type="button" className="filter-element" name="Autos" onClick={filterSegment}>Autos</button>
<button type="button" className="filter-element" name="Pickups y Comerciales" onClick={filterSegment}>Pickups y Comerciales</button>
<button type="button" className="filter-element" name="SUVs y Crossovers" onClick={filterSegment}>SUVs y Crossovers</button>
</div>
<p className="filter-element-last">Ordenar por ^</p>
</nav>
);
}
export default FilterNav;
我从 ModelsContext.jsx 中的 useContext 的 api 中得到的信息，这是我目前写的：
import React, { createContext, useState, useEffect } from 'react';
export const ModelsContext = createContext();
const ModelsProvider = (props) => {
//State de modelos
const [modelos, guardarModelo] = useState([]);
const consultarAPI = async () => {
const api = await fetch("https://challenge.agenciaego.tech/models");
const modelos = await api.json();
guardarModelo(modelos);
}
//Cargar un modelo
useEffect(() => {
consultarAPI()
}, []);
return (
<ModelsContext.Provider
value={{
modelos,
guardarModelo
}}
>
{props.children}
</ModelsContext.Provider>
)
}
export default ModelsProvider;
我的问题是，当我通过 filterSegment 函数过滤 API 模型时，我不知道如何从 API 重新获取数据，因为当我对 filterSegment 函数进行新调用时，它会过滤过滤后的数据。我尝试添加一个布尔状态，并且我正在考虑使用所有数据添加另一个状态，但我真的迷失了实现它，我对 React.js 还是很陌生。 我已经通过堆栈溢出和谷歌搜索，我无法得到答案，如果你能给我一个线索或某种指导，将不胜感激。
非常感谢！
【问题讨论】：
标签： javascript reactjs api filter fetch