国家/地区按用户筛选

如何解决国家/地区按用户筛选

尊敬的程序员，我有一些对象 like this 和简单的下拉HTML选择器

如何按国家/地区进行过滤，取决于用户选择？

示例：

用户选择“美国人”->显示“美国”用户

用户选择“加拿大”，“英国”->显示“加拿大”，“英国”的用户

screenshot

反应js 代码：

TableTitle.js

const nationalities = ['american','australian','brazilian','british','canadian','danish','dutch','finnish','french','german','iranian','irish','new zealander','norwegian','spanish','swiss','turkish'];

{/*selector*/}
<Select
  mode="tags"
  size='large'
  placeholder="Nationalities"
  onChange={handleNationChange}>
      {nationalities.map((item) =>
             <Option key={item}>
                {item}
             </Option>
        )}
 </Select>

TableContent.js显示结果：

const TableContent = () => {
    const [data,setData] = useState([]),useEffect(() => {
       axios.get(`https://randomuser.me/api/?results=100`).then(({data}) => {
       setData(data.results));
   },[]);

return <Table dataSource={data} title={() => <TableTitle/>} />

感谢您的帮助！

解决方法

以下是用于过滤数据的示例代码。 如果您需要更多帮助。请在下面发表评论。

let url = "https://randomuser.me/api/?results=100";

const filterByCountry = (data,country) => {
  return data.filter((record) => record.location.country === country);
};

fetch(url)
  .then((res) => res.json())
  .then((data) => {

    //data from url loaded into variable 'data'

    //filter data according to country
    const out = filterByCountry(data.results,"Australia");
    console.log(out);
  })
  .catch((err) => {
    throw err;
});