在React中通过response.status控制HTML与moves数组的显示

你需要给组件添加状态管理来追踪请求状态和数据，再通过条件判断控制不同场景下的渲染内容。以下是修改后的完整代码：

import { useState } from 'react';

function PokemonSearch() {
  // 状态管理：搜索关键词、招式列表、是否出现404错误
  const [search, setSearch] = useState('');
  const [moves, setMoves] = useState([]);
  const [isNotFound, setIsNotFound] = useState(false);

  // 处理输入框内容变化
  const searchChange = (e) => {
    setSearch(e.target.value);
    // 输入时重置错误和招式状态
    setIsNotFound(false);
    setMoves([]);
  };

  const getPokemon = async (event) => {
    event.preventDefault();
    try {
      const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${search}`);
      if (response.status === 404) {
        // 捕获404错误，更新状态
        setIsNotFound(true);
        setMoves([]);
        return;
      }
      const data = await response.json();
      // 从API返回的对象中提取招式名称
      const moveNames = data.moves.map(item => item.move.name);
      setMoves(moveNames);
      setIsNotFound(false);
    } catch (err) {
      // 处理其他请求异常
      setIsNotFound(true);
      setMoves([]);
    }
  };

  return (
    <div>
      <h1>Pokemon</h1>
      <form onSubmit={getPokemon}>
        <input
          type='search'
          placeholder='搜索宝可梦'
          onChange={searchChange}
          value={search}
        />
        <button type='submit'>搜索！</button>
      </form>

      {/* 条件渲染逻辑 */}
      {isNotFound ? (
        <p>找不到对应的宝可梦，请重新搜索！</p>
      ) : (
        <div>
          <p>招式</p>
          {moves.length > 0 ? (
            <ul>
              {moves.map((move, index) => (
                <li key={index}>
                  <p>{move}</p>
                </li>
              ))}
            </ul>
          ) : (
            <p>请输入宝可梦名称进行搜索</p>
          )}
        </div>
      )}
    </div>
  );
}

export default PokemonSearch;

关键改动说明 #

1. 状态管理：新增useState变量，分别追踪搜索关键词、招式列表和404错误状态，确保状态变化能触发组件重新渲染
2. 请求处理：在getPokemon中判断响应状态，若为404则标记错误并清空招式列表；成功请求时提取API返回的招式名称存入状态
3. 条件渲染：
   • 先判断是否出现404，显示对应的错误提示
   • 无404时，再判断招式数组是否有内容：有内容则渲染列表，为空则提示用户搜索
4. 表单修复：将原input type='button'改为button type='submit'，确保表单onSubmit事件能正常触发

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