React.js 搜索货币数据无匹配结果时显示Not Found提示的实现方法

以下是修改后可直接运行的完整代码：

import { useState, useEffect } from "react";
import axios from "axios";
function CurrencyInfo (){
    const [currData, setCurrData] = useState([])
    const [searchData, setSearchData] = useState([]);
    // 可选：新增搜索状态控制，避免首次进入还未搜索就显示Not Found
    const [hasSearched, setHasSearched] = useState(false);

    useEffect(()=>{
        axios.get("https://api.coinbase.com/v2/currencies").then((res)=>{
            setCurrData(res.data.data)
        })
     },[])
    const Search = (event) =>{
        event.preventDefault();
        const toSearch = event.target.search.value.trim();
        setHasSearched(true);
        // 过滤空搜索，不需要可以删除该判断
        if(!toSearch) {
          setSearchData([]);
          return;
        }
        // 筛选所有匹配的货币条目
        const matchedList = currData.filter(val => 
          val.name.toLowerCase() === toSearch.toLowerCase()
        );
        setSearchData(matchedList);
    }
 return (
        <div>
            <form onSubmit={Search}>
                <input type = "text" name="search"/><br/>
                <input type= "submit" value="Search"  className="buttons"/>
            </form>
            {/* 搜索结果渲染区，无匹配则显示Not Found */}
            <div className="search-result">
              {hasSearched ? (
                searchData.length > 0 ? (
                  searchData.map((val, index)=> (
                    <div key={index}>
                      货币名称：{val.name} / 货币ID：{val.id} / 最小交易额度：{val.min_size}
                    </div>
                  ))
                ) : <div>*Not Found*</div>
              ) : null}
            </div>
                
         <table border="1">
                <tr>
                    <th>Name</th>
                    <th>Id</th>
                    <th>Minimum value</th>
                </tr>
                {currData.map((val, index)=>{
                   return (
                            <tr key={index}>
                            <td>{val.name}</td>
                            <td>{val.id}</td>
                            <td>{val.min_size}</td>
                            </tr>
                        )
                   })}
            </table>
            
        </div>
    )
}
export default CurrencyInfo

核心修改说明 #

• 修正了搜索逻辑：把原来用map做匹配的逻辑替换为filter筛选，统一存储完整的匹配货币对象，解决了原逻辑字段打散、重复更新状态的问题
• 新增无结果判断：在搜索结果渲染区加入三元判断，有匹配结果时渲染对应数据，无匹配时显示Not Found提示
• 补充了列表渲染的key属性：修复React列表渲染缺少key的控制台警告
• 可选的搜索状态控制：如果不需要避免首次进入显示Not Found的控制，可直接删除hasSearched相关代码，搜索结果区直接用以下判断即可：

<div className="search-result">
  {searchData.length > 0 ? (
    searchData.map((val, index)=> (
      <div key={index}>
        货币名称：{val.name} / 货币ID：{val.id} / 最小交易额度：{val.min_size}
      </div>
    ))
  ) : <div>*Not Found*</div>}
</div>

内容的提问来源于stack exchange，提问作者Harshad BB