React货币转换器报错：[object Object]解析失败及下拉框不显示修复

问题根源分析 #

所有问题的核心是InputBox组件的props接收方式错误，同时存在URL格式错误和布尔值传参错误：

• React组件的props是单一对象，直接逐个接收参数会导致第一个参数nlabel被赋值为整个props对象，而非传入的字符串
• fetch URL存在换行，导致请求失败无法获取汇率数据，进而currencyOptions为空数组
• 布尔属性传了字符串值，导致disabled状态不符合预期

具体修复步骤 #

1. 修正InputBox组件的props解构方式 #

修改InputBox.jsx的函数定义，改用对象解构接收props，同时修复布局类名和渲染逻辑：

import React, { useId } from 'react'

// 用对象解构接收所有props，替代逐个参数的错误写法
function InputBox({
    nlabel,
    amount=0,
    currencyOptions=[],
    onAmountChange,
    onCurrencyChange,     
    selectedCurrency="usd",
    amountDisabled=false,
    currencyDisabled=false,
    className="",
}) 
{
const id=useId()
    return (
    <div className={`bg-white p-3 rounded-lg text-sm flex ${className}`}>
        <div className='w-1/2'>
            <label htmlFor={id} className='text-black/40 mb-2 block'>{nlabel}</label>
            <input type="number" 
            id={id}
            className='outline-none w-full bg-transparent py-3 text-black/90'
            placeholder='0'
            disabled={amountDisabled}
            value={amount}
            onChange={(e)=>onAmountChange && onAmountChange(Number(e.target.value))}
            />
        </div>
        <div className='w-1/2 flex flex-wrap justify-end text-right'>
        <p className="text-black/40 mb-2 w-full">Currency Type</p>
        <select value={selectedCurrency}
        className='rounded-lg px-1 py-1 bg-gray-100 cursor-pointer outline-none'
        onChange={(e)=>{onCurrencyChange && onCurrencyChange(e.target.value)}}
        disabled={currencyDisabled}
        >
            {console.log("opt", currencyOptions)}
            {/* 启用option渲染代码 */}
            {currencyOptions.map((currency)=>(
                <option key={currency} value={currency}>{currency}</option>
            ))}
        </select>
        </div>
    </div>
)
}

export default InputBox

2. 修正App.jsx中的布尔属性传值 #

把字符串类型的"false"改成布尔值false，确保disabled状态正确：

<InputBox
  nlabel={str1}
  amount={amount} 
  currencyOptions={options}
  onAmountChange={(amount)=>{setAmount(amount)}}
  onCurrencyChange={(currency)=>{setFrom(currency)}}
  selectedCurrency="usd"
  amountDisabled={false}
  currencyDisabled={false}
/>

3. 修复useCurrencyInfo.jsx中的fetch URL #

去掉URL中的换行，确保请求地址有效，同时添加兜底处理避免报错：

import { useEffect,useState } from "react";

function useCurrencyinfo(currency)
{
const [data,setData]=useState({});

useEffect(()=>{
  // 修正URL格式，去掉换行
  fetch(`https://cdn.jsdelivr.net/npm/@fawazahmed0/currencyapi@latest/v1/currencies/${currency}.json`)
    .then((res)=>res.json())
    .then((res)=>setData(res[currency] || {})) // 兜底处理，避免res[currency]为undefined
},[currency])
return data
}

export default useCurrencyinfo;

4. 修正App.jsx中的form标签逻辑 #

将InputBox放入form内部，确保提交事件能触发转换逻辑：

<form onSubmit={(e)=>{
  e.preventDefault()
  convert()
}}>
  <div className='w-full  mb-1'>
    <InputBox
      // ... 保留原有props
    />
  </div>
  {/* 添加提交按钮，方便触发转换 */}
  <button type="submit" className="w-full mt-4 bg-blue-500 text-white py-2 rounded-lg">转换</button>
</form>

修复后效果验证 #

• 控制台"[object Object]"警告消失，nlabel正确显示为"from"
• currencyOptions能正确获取汇率数据的键值，下拉列表正常渲染
• 金额输入框和下拉选择器的disabled状态符合预期
• 转换功能可正常触发

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