React中如何在获取数据后实现数据筛选？

你的代码存在两个核心问题导致筛选失效：

1. 下拉框的 onChange 事件处理错误
   直接将 setCurrency 传给 onChange 时，setCurrency 接收的是事件对象（event），而非选中的选项值。这样 currency 状态存储的不是预期的字符串（如'crypto'），后续筛选逻辑自然无法生效。

2. 缺少数据筛选逻辑
   当前代码直接渲染了所有数据，没有根据 currency 的值对数据进行过滤。

修改后的完整代码 #

import { useState, useEffect } from 'react'

const Fetch = () => {
    const [data, setData] = useState();
    const [currency, setCurrency] = useState('crypto');
    const [isLoaded, setIsLoaded] = useState(false);

    useEffect(() => {
        fetch('https://api.coingecko.com/api/v3/exchange_rates')
            .then((res) => res.json())
            .then((res) => { 
                setData(res.rates); 
                setIsLoaded(true); 
            })
    }, [])

    if (!isLoaded) {
        return <h2>Waiting for data...</h2>
    }

    // 新增筛选逻辑
    const filteredData = Object.values(data).filter(item => {
        if (currency === 'all') return true;
        return item.type === currency;
    })

    return (
        <div>
            <label htmlFor="currency">Choose currency: </label>
            {/* 修复onChange事件处理 */}
            <select id='currency' onChange={(e) => setCurrency(e.target.value)}>
                <option value="all">All</option>
                <option value="crypto">Crypto</option>
                <option value="fiat">Fiat</option>
                <option value="commodity">Commodity</option>
            </select>

            {/* 渲染筛选后的数据 */}
            {filteredData.map((item, i) => {
                return (
                    <div key={i}>
                        <h3>{item.name}({item.unit}) : <span style={{ color: "red" }}>{item.value}</span></h3>
                        <p>type: {item.type} </p>
                        <hr />
                    </div>
                )
            })}
        </div>
    )
}

export default Fetch;

关键修改说明 #

• 修复 onChange 事件：通过 (e) => setCurrency(e.target.value) 从事件对象中提取选中的选项值，确保 currency 状态存储正确的筛选关键词。
• 添加筛选逻辑：使用 filter 方法根据 currency 的值过滤数据：
  • 当选择"All"时，返回所有数据；
  • 其他选项则返回 type 与选中值匹配的数据。

内容的提问来源于stack exchange，提问作者Vasileios Kolpaxidis