React中API数据获取、ID搜索及按钮变色功能的问题排查

原代码存在的问题 #

• 搜索逻辑依赖异步更新的searchInput，导致搜索结果延迟或错误
• 未实现点击搜索按钮触发查询的逻辑，而是用输入框实时触发，不符合需求
• 缺少按钮点击时的颜色切换状态
• 列表项<li>未正确包裹在<ul>/<ol>中，违反HTML语义规范
• 初始状态下无数据时的占位逻辑冗余

修复后的完整代码 #

import "mvp.css";
import React, { useState, useEffect } from "react";
import axios from "axios";

function QuoteSearch() {
  const [APIData, setAPIData] = useState([]);
  const [filteredResult, setFilteredResult] = useState(null);
  const [searchId, setSearchId] = useState("");
  const [isButtonClicked, setIsButtonClicked] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  // 初始化获取所有数据
  useEffect(() => {
    axios.get("https://kimiquotes.herokuapp.com/quotes")
      .then((response) => setAPIData(response.data))
      .catch(err => console.error("数据加载失败:", err));
  }, []);

  // 搜索逻辑：按ID精确匹配
  const handleSearch = () => {
    setIsLoading(true);
    setIsButtonClicked(true); // 触发按钮颜色变化
    // 模拟加载延迟，实际项目可移除
    setTimeout(() => {
      const result = APIData.find(item => item.id.toString() === searchId.trim());
      setFilteredResult(result);
      setIsLoading(false);
      // 3秒后恢复按钮原色
      setTimeout(() => setIsButtonClicked(false), 3000);
    }, 500);
  };

  return (
    <div style={{ padding: 20, maxWidth: 600, margin: "0 auto" }}>
      <div style={{ display: "flex", gap: 10, marginBottom: 20 }}>
        <input
          type="number"
          placeholder="输入ID搜索"
          value={searchId}
          onChange={(e) => setSearchId(e.target.value)}
          style={{ flex: 1, padding: 8, fontSize: 16 }}
        />
        <button
          onClick={handleSearch}
          style={{
            padding: "8px 16px",
            backgroundColor: isButtonClicked ? "#ff6b6b" : "#4ecdc4",
            color: "white",
            border: "none",
            borderRadius: 4,
            cursor: "pointer",
            transition: "background-color 0.3s"
          }}
          disabled={!searchId.trim()}
        >
          {isLoading ? "搜索中..." : "搜索"}
        </button>
      </div>

      {/* 搜索结果展示 */}
      {filteredResult ? (
        <ul style={{ listStyle: "none", padding: 0 }}>
          <li style={{ padding: 10, borderBottom: "1px solid #eee" }}>ID: {filteredResult.id}</li>
          <li style={{ padding: 10, borderBottom: "1px solid #eee" }}>QUOTE: {filteredResult.quote}</li>
          <li style={{ padding: 10 }}>YEAR: {filteredResult.year}</li>
        </ul>
      ) : searchId && !isLoading ? (
        <p style={{ color: "#ff6b6b" }}>未找到对应ID的内容</p>
      ) : null}
    </div>
  );
}

export default function App() {
  return <QuoteSearch />;
}

关键改动说明 #

1. 搜索逻辑优化：

   • 改用find方法按ID精确匹配，符合需求中"通过ID搜索"的要求
   • 新增isLoading状态处理搜索中的加载提示
   • 搜索触发从onChange改为点击按钮，避免实时误触发

2. 按钮颜色切换：

   • 新增isButtonClicked状态，点击时切换按钮背景色，3秒后自动恢复
   • 添加过渡动画让颜色变化更平滑自然

3. 语义化与结构修复：

   • 将搜索结果的<li>包裹在<ul>中，符合HTML规范
   • 替换第三方UI组件为原生input和button，减少不必要依赖
   • 新增空输入时按钮禁用、未找到结果的友好提示

4. 状态管理优化：

   • 用filteredResult存储单条搜索结果（ID唯一），而非数组
   • 修复异步状态更新的逻辑问题，避免使用未更新的状态值

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