API调用中URL显示[object%20Object]？请帮忙排查Settings组件问题

咱们先拆解下这个问题：当你把一个JS对象直接转成字符串时，默认会得到[object Object]，URL编码后空格就变成了%20，所以就出现了你看到的[object%20Object]。这说明你在API URL里不小心拼接了一个对象，而不是预期的字符串/数值。

看你贴的代码，问题主要出在这几个地方：

1. onChange回调的参数完全错了 #

React里<select>的onChange事件回调，第一个参数是事件对象（event），不是你写的prop和attr。你需要通过event.target来获取选中的选项值，比如event.target.value。

2. 用了未定义的变量id和value #

你的代码里直接调用this.props.fetchData(id,value)，但id和value在当前的render作用域里根本没定义啊！这两个变量要么是undefined，要么如果你误把事件对象当成了某个参数传递进去，那fetchData拿到的就是个对象，拼URL的时候自然就变成[object%20Object]了。

修正后的代码示例 #

假设你需要传递的id来自组件的props（比如this.props.id），选中的是货币值，那代码应该改成这样：

class Settings extends Component {
  render(){
    return(
      <div className='App container'>
        <h3>Select Currency</h3>
        <select 
          className="custom-select" 
          onChange={(event) => {
            const selectedCurrency = event.target.value;
            // 确保id是你需要的正确值，比如从props获取
            this.props.fetchData(this.props.id, selectedCurrency);
          }}
        >
          <option value="">请选择货币</option>
          <option value='EUR'>EUR</option>
          {/* 可以再加其他货币选项 */}
        </select>
        <Link to='/' className="btn" type="submit">Submit</Link>
      </div>
    )
  }
}

额外要检查的点 #

最后别忘了去看你的fetchData函数是怎么处理参数的，确保它没有把对象直接拼到URL里。比如如果fetchData里是这样写的：

fetch(`/api/your-endpoint/${id}/${value}`)

那一定要保证id和value都是字符串或数值类型，不能是对象。

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