Javascript 按选择元素的值筛选组件

下面是我在Codesandbox上的应用程序链接，它只是一个组件app.js

在data.js中，我有一个对象数组：

export const data = [
  {
    currencies: [{ code: "AFN", name: "Afghan afghani", symbol: "؋" }],
    languages: [
      { iso639_1: "ps", iso639_2: "pus", name: "Pashto", nativeName: "پښتو" },
      { iso639_1: "uz", iso639_2: "uzb", name: "Uzbek", nativeName: "Oʻzbek" },
      {
        iso639_1: "tk",
        iso639_2: "tuk",
        name: "Turkmen",
        nativeName: "Türkmen"
      }
    ],
    flag: "https://restcountries.eu/data/afg.svg",
    name: "Afghanistan",
    topLevelDomain: [".af"],
    capital: "Kabul",
    region: "Asia",
    subregion: "Southern Asia",
    population: 27657145,
    borders: ["IRN", "PAK", "TKM", "UZB", "TJK", "CHN"],
    nativeName: "افغانستان"
  },
  {
    currencies: [{ code: "EUR", name: "Euro", symbol: "€" }],
    languages: [
      {
        iso639_1: "sv",
        iso639_2: "swe",
        name: "Swedish",
        nativeName: "svenska"
      }
    ],
    flag: "https://restcountries.eu/data/ala.svg",
    name: "Åland Islands",
    topLevelDomain: [".ax"],
    capital: "Mariehamn",
    region: "Europe",
    subregion: "Northern Europe",
    population: 28875,
    borders: [],
    nativeName: "Åland"
  },
  {
    currencies: [{ code: "ALL", name: "Albanian lek", symbol: "L" }],
    languages: [
      { iso639_1: "sq", iso639_2: "sqi", name: "Albanian", nativeName: "Shqip" }
    ],
    flag: "https://restcountries.eu/data/alb.svg",
    name: "Albania",
    topLevelDomain: [".al"],
    capital: "Tirana",
    region: "Europe",
    subregion: "Southern Europe",
    population: 2886026,
    borders: ["MNE", "GRC", "MKD", "KOS"],
    nativeName: "Shqipëria"
  },
  {
    currencies: [{ code: "DZD", name: "Algerian dinar", symbol: "د.ج" }],
    languages: [
      { iso639_1: "ar", iso639_2: "ara", name: "Arabic", nativeName: "العربية" }
    ],
    flag: "https://restcountries.eu/data/dza.svg",
    name: "Algeria",
    topLevelDomain: [".dz"],
    capital: "Algiers",
    region: "Africa",
    subregion: "Northern Africa",
    population: 40400000,
    borders: ["TUN", "LBY", "NER", "ESH", "MRT", "MLI", "MAR"],
    nativeName: "الجزائر"
  },
  {
    currencies: [{ code: "USD", name: "United State Dollar", symbol: "$" }],
    languages: [
      {
        iso639_1: "en",
        iso639_2: "eng",
        name: "English",
        nativeName: "English"
      },
      {
        iso639_1: "sm",
        iso639_2: "smo",
        name: "Samoan",
        nativeName: "gagana fa'a Samoa"
      }
    ],
    flag: "https://restcountries.eu/data/asm.svg",
    name: "American Samoa",
    topLevelDomain: [".as"],
    capital: "Pago Pago",
    region: "Oceania",
    subregion: "Polynesia",
    population: 57100,
    borders: [],
    nativeName: "American Samoa"
  },
  {
    currencies: [{ code: "EUR", name: "Euro", symbol: "€" }],
    languages: [
      { iso639_1: "ca", iso639_2: "cat", name: "Catalan", nativeName: "català" }
    ],
    flag: "https://restcountries.eu/data/and.svg",
    name: "Andorra",
    topLevelDomain: [".ad"],
    capital: "Andorra la Vella",
    region: "Europe",
    subregion: "Southern Europe",
    population: 78014,
    borders: ["FRA", "ESP"],
    nativeName: "Andorra"
  },
  {
    currencies: [{ code: "AOA", name: "Angolan kwanza", symbol: "Kz" }],
    languages: [
      {
        iso639_1: "pt",
        iso639_2: "por",
        name: "Portuguese",
        nativeName: "Português"
      }
    ],
    flag: "https://restcountries.eu/data/ago.svg",
    name: "Angola",
    topLevelDomain: [".ao"],
    capital: "Luanda",
    region: "Africa",
    subregion: "Middle Africa",
    population: 25868000,
    borders: ["COG", "COD", "ZMB", "NAM"],
    nativeName: "Angola"
  }
];

我想通过它绘制地图，并在app.js上显示每个国家的信息（我做了这部分）

下面是app.js中的代码

import React, { useState, useEffect } from "react";
import "./styles.css";
import { data } from "./data";

export default function App() {
  const [cuntries, setCountries] = useState([]);
  const [region, setRegion] = useState('');

  useEffect(()=>{
    setCountries(data)
  },[])

  function filterByRegion(event) {
    setRegion(event.target.value);
    handleSubmit()
    // event.preventDefault()
  }

  function handleSubmit(){
    const newArr = cuntries.filter(cunt=> cunt.region === region)
    setCountries(newArr)
  }
  

  console.log(region);
  console.log(cuntries);

  return (
    <div className="App">
      <h1>filtering</h1>
      <form onChange={filterByRegion}>
      <label>Filter by region:</label>
        <select name="regions" id="region-select" >
          <option value="">Chose a region</option>
          <option value="Africa">Africa</option>
          <option value="Americas">Americas</option>
          <option value="Asia">Asia</option>
          <option value="Oceania">Oceania</option>
          <option value="Polar">Polar</option>
        </select>
      </form>
      <div>
        {cuntries.map((country) => {
          return (
            <div key={country.name} className="country">
              <h3>{country.name}</h3>
              <h3>{country.nativeName}</h3>
              <h3>{country.region}</h3>
            </div>
          );
        })}
      </div>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
从“/data”导入{data}；
导出默认函数App（）{
const[cuntry，setCountries]=useState（[]）；
const[region，setRegion]=useState（“”）；
useffect（（）=>{
国家（数据）
},[])
函数过滤器ByRegion（事件）{
setRegion（event.target.value）；
handleSubmit（）
//event.preventDefault（）
}
函数handleSubmit（）{
const newArr=cuntries.filter（cunt=>cunt.region===region）
setCountries（纽瓦尔）
}
控制台日志（区域）；
控制台日志（CUNTERYS）；
返回(
过滤
按区域筛选：
选择一个地区
非洲
美洲
亚洲
大洋洲
极地的
{cuntries.map（（国家）=>{
返回(
{country.name}
{country.nativeName}
{国家地区}
);
})}
);
}

在app.js中，我有一个包含区域的select元素 我想过滤我用来渲染每个国家的数组，这样当我选择一个不同的地区时，map方法就会渲染这个地区的国家

我尝试了一些解决办法，但没有一个奏效

---

再次链接到应用程序

主要问题可能是

setRegion

是异步处理的，因此一旦您尝试在

handleSubmit

中按其值进一步筛选，则该值很可能不存在。请参阅下面关于组件的建议修改

第一件事是将

onChange

事件添加到

select

而不是

form

：

<select name="regions" id="region-select" onChange={filterByRegion}>
    <option value="">Chose a region</option>
    <option value="Africa">Africa</option>
    <option value="Americas">Americas</option>
    <option value="Asia">Asia</option>
    <option value="Oceania">Oceania</option>
    <option value="Polar">Polar</option>
</select>

然后我将使用

.filter

将

数据作为原始数组，以查找如下值：

const handleSubmit = (regionValue) => {
    const newArr = data.filter(c => c.region === regionValue)
    setCountries(newArr)
}

请找到工作代码沙盒

+1添加：

如果要为未找到值的国家/地区呈现某些内容，请执行以下操作：

{cuntries && cuntries.length > 0 ?
     cuntries.map((country) => {
          return (
            <div key={country.name} className="country">
              <h3>{country.name}</h3>
              <h3>{country.nativeName}</h3>
              <h3>{country.region}</h3>
            </div>
          );
     })
     : <div>No value found</div>
}

{cuntries&&cuntries.length>0？
城市地图（（国家）=>{
返回(
{country.name}
{country.nativeName}
{国家地区}
);
})
：找不到值
}

因此，如果在
国家/地区
数组中没有值，您可以呈现一个
，表示没有找到值。
好的，我应该在哪里添加handleSumbit（）函数作为事件监听器这里是与updates@AhmedEldawody根据我在这里写的内容查看工作修改：一旦你选择了值，下拉菜单就像魅力一样工作。我不想粗鲁，一切都很好。但是，当我选择第一个选项（选择了一个区域）时，没有任何效果。谢谢您，先生/Norbitrial。在App.js中，我从你那里学到了很多拼写错误-
cuntry
，而不是
countries
{cuntries && cuntries.length > 0 ?
     cuntries.map((country) => {
          return (
            <div key={country.name} className="country">
              <h3>{country.name}</h3>
              <h3>{country.nativeName}</h3>
              <h3>{country.region}</h3>
            </div>
          );
     })
     : <div>No value found</div>
}