Блог

у меня есть файл json в качестве сервера, мне нужно отфильтровать данные json, когда я нажимаю кнопку, например, на панели навигации, которая у меня есть:

 const NavBar = ({setSearchValue, setType}) =gt; {  const handleType = (heroType) =gt;{  setType(heroType)  }   return ( // this input is ok, i can search data from here  lt;input id='searchInput' placeholder='Search' onChange={(event) =gt; {setSearchValue(event.target.value)}}/gt; //these are the buttons  lt;Nav.Link onClick={() =gt; handleType('All')}gt;All Heroeslt;/Nav.Linkgt;  lt;Nav.Link onClick={() =gt; handleType('Flying')} gt;Flying Heroeslt;/Nav.Linkgt;  lt;Nav.Link onClick={() =gt; handleType('Flightless')}gt;Flightless Heroeslt;/Nav.Linkgt;  

и вот здесь мне нужно это показать

 //import Navbar  import NavBar from "./NavBar";    const Home = () =gt; {  // saved the data i need to show   const [content, setContent] = useState();  // saved the searchvalue of navbar, its ok.  const [searchValue, setSearchValue] = useState("");  // i tried save the button data here, next with a IF function i tried to show it, no work  const [type, setType] = useState("Flying");    useEffect(() =gt; { // get json dta  const getData = async () =gt; {  const response = await db.get("data");    let data = response.data.filter((val) =gt; { // if no searchValue, return all  if (searchValue === "") return val; //if searchVale, return coincidences  else if (val.nombre.toLowerCase().includes(searchValue.toLowerCase()))  return val;  });  // returns bootstrap rows depending on number of elements  const rows = [...Array(Math.ceil(data.length / 3))];  const imagesRows = rows.map((row, idx) =gt;  data.slice(idx * 3, idx * 3   3)  );  //saved all in setContent  setContent(  //code  )  getData();  }, [searchValue]);    return (  lt;gt;   lt;NavBar setSearchValue={setSearchValue} setType={setType} /gt; //show content  lt;Containergt;{content gt;= 0 ? lt;pgt;No resultslt;/pgt; : content}lt;/Containergt;  lt;/gt;  );  };  

Я перепробовал много вещей, я думаю, что мне нужно изменить много кода, я хочу, чтобы эта работа работала. Любая помощь была бы чрезвычайно признательна.

РЕДАКТИРОВАТЬ Json:

 {  "data": [  {  "id": 0,  "nombre": "Punisher",  "puedeVolar": false,  "nombreReal": "Frank Castle",  "avatarURL": ""  },  {  "id": 1,  "nombre": "Green Arrow",  "puedeVolar": false,  "nombreReal": "Oliver Jonas Queen",  "avatarURL": ""  },  {  "id": 2,  "nombre": "Human Torch",  "puedeVolar": true,  "nombreReal": "Jonathan Lowell Spencer",  "avatarURL": ""  },  {  "id": 3,  "nombre": "Martian Manhunter",  "puedeVolar": true,  "nombreReal": "J'onn J'onzz",  "avatarURL": ""  },  {  "id": 4,  "nombre": "Aquaman",  "puedeVolar": false,  "nombreReal": "Arthur Curry",  "avatarURL": ""  } }  

Поэтому при нажатии кнопки отображать героев.puedeVolar === ложь или отображать героев.puedeVolar === истина, в зависимости от нажатой кнопки

Опубликуйте свой JSON, чтобы помочь вам. Вы правильно поднимаете состояния, вам просто нужно сделать то же самое, что вы сделали с вводом. Поместите тип в зависимость от эффекта использования и внутри него отфильтруйте JSON с помощью значения типа.

 useEffect(()=gt;{  //... Keep your working code  let data = response.data.filter((val) =gt; {    //Keep your working code or refactor it    //Add you new filter params  if (val.type === type) return val;    }   }, [type, searchValue]);