React项目：如何将API返回的摩托车数据展示给用户？

先梳理现有代码的核心问题：

• App组件中Make输入框未做受控处理，无法获取用户输入的品牌值
• Button组件的API请求是硬编码固定URL，无法使用用户输入的参数动态查询
• 没有状态存储获取到的摩托车数据，也未实现展示逻辑
• Axios请求的URL多了一层引号，会导致请求失败
• 组件间无状态共享，子组件无法拿到父组件的输入值

以下是修复后的完整方案：

第一步：App组件添加状态管理与受控输入 #

修改App组件，用useState管理用户输入参数、返回数据及加载状态，将输入框改为受控组件，并向子组件传递必要的状态与方法：

import React, { useState } from 'react'
import './App.css'
import Model from './Model'
import Button from './Button'
import Year from './Year'

function App() {
  // 管理用户输入的三个参数
  const [make, setMake] = useState('')
  const [model, setModel] = useState('')
  const [year, setYear] = useState('')
  // 管理获取到的摩托车数据
  const [motorcycleData, setMotorcycleData] = useState(null)
  // 管理请求加载状态
  const [isLoading, setIsLoading] = useState(false)

  // 处理API请求逻辑
  const findMotorcycle = async () => {
    if (!make || !model || !year) {
      alert('请填写完整的品牌、型号和年份')
      return
    }
    setIsLoading(true)
    try {
      // 动态构建请求URL，转义特殊字符
      const encodedModel = encodeURIComponent(model)
      const url = `https://motorcycle-specs-database.p.rapidapi.com/article/${year}/${make}/${encodedModel}`
      // RapidAPI需要请求头，替换为你的API Key和Host
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          'X-RapidAPI-Key': '你的API_KEY',
          'X-RapidAPI-Host': 'motorcycle-specs-database.p.rapidapi.com'
        }
      })
      const data = await response.json()
      setMotorcycleData(data)
    } catch (error) {
      console.error('获取数据失败:', error)
      alert('获取摩托车数据失败，请检查输入或稍后重试')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div className="app-container">
      <h2>摩托车查询</h2>
      <div className="input-group">
        <label>品牌(Make):</label>
        <input
          type="text"
          value={make}
          onChange={(e) => setMake(e.target.value)}
          placeholder="例如: BMW"
        />
      </div>
      {/* 向Model组件传递状态与更新方法 */}
      <Model model={model} setModel={setModel} />
      {/* 向Year组件传递状态与更新方法 */}
      <Year year={year} setYear={setYear} />
      <br />
      {/* 向Button组件传递点击事件与加载状态 */}
      <Button onClick={findMotorcycle} isLoading={isLoading} />

      {/* 展示查询到的摩托车数据 */}
      {motorcycleData && (
        <div className="data-display">
          <h3>查询结果:</h3>
          <pre>{JSON.stringify(motorcycleData, null, 2)}</pre>
        </div>
      )}
    </div>
  )
}

export default App

第二步：修改Model组件为受控组件 #

import React from 'react'

function Model({ model, setModel }) {
  return (
    <div className="input-group">
      <label>型号(Model):</label>
      <input
        type="text"
        value={model}
        onChange={(e) => setModel(e.target.value)}
        placeholder="例如: F 800 GS Trophy"
      />
    </div>
  )
}

export default Model

第三步：修改Year组件为受控组件 #

import React from 'react'

function Year({ year, setYear }) {
  return (
    <div className="input-group">
      <label>年份(Year):</label>
      <input
        type="number"
        value={year}
        onChange={(e) => setYear(e.target.value)}
        placeholder="例如: 2012"
        min="1900"
        max={new Date().getFullYear()}
      />
    </div>
  )
}

export default Year

第四步：修改Button组件接收点击事件与加载状态 #

import React from 'react'

function Button({ onClick, isLoading }) {
  return (
    <div>
      <button onClick={onClick} disabled={isLoading}>
        {isLoading ? '查询中...' : '查找摩托车(Find Motorcycle)'}
      </button>
    </div>
  )
}

export default Button

关键改动说明： #

1. 受控输入：所有输入框绑定状态，实时获取用户输入值，方便后续校验与使用
2. 动态API请求：根据用户输入参数动态构建URL，用encodeURIComponent处理特殊字符
3. 状态管理：用motorcycleData存储返回数据，isLoading处理加载状态，优化用户体验
4. 错误处理：添加输入校验与请求异常捕获，避免无效请求并提示用户
5. 组件通信：通过props传递状态与方法，实现父子组件数据共享
6. URL修复：移除原代码中多余的引号，确保请求地址格式正确；同时补充RapidAPI必填的请求头参数

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