Question

我的渲染如下。我已经没想完了。

class Settings extends Component {

  render(){
    return(
    <div className='App container'>
       <h3>Select Currency</h3>
      <select className="custom-select"
        onChange={(prop, attr) => this.props.fetchData(id,value)}>
        <option value='selected'></option>
        <option value='EUR'>EUR</option
      </select>
      <Link to='/' className="btn" type="submit">Submit</Link>
    </div>
  )
 }
}

}

请帮忙，我的代码出了什么问题？我怎样才能解决这个奇怪的错误？

Answer 1

您的onChange处理程序不正确，因为没有id和value传递给它，只有事件对象。从event.target对象中，你应该获得这个值，这里是示例，以及组件的简短重构：

class Settings extends Component {

  handleChange(e) {
   this.props.fetchCurrency(e.target.id, e.target.value)
  }


  render(){
    return(
     <div className='App container'>
      <h3>Select Currency</h3>
      <select className="custom-select" id="inputGroup"
       onChange={this.handleChange.bind(this)}>
       <option value='selected'></option>
       <option value='EUR'>EUR</option>
       <option value='AUD'>AUD</option>
       <option value='GBP'>GBP</option>
       <option value='CAD'>CAD</option>
       <option value='JPY'>JPY</option>
      </select>
     <Link to='/' className="btn btn-light btn-block" type="submit">Submit</Link>
  </div>
  )
 }
}

Answer 2

onChange默认使用event回调（如果你记录id，你会看到一个Proxy对象）。所以你需要做的是：

{(event) => this.props.fetchCurrency(event.target.value, event.target.options[event.target.options.selectedIndex].id)}

如果您需要所选选项的ID，则需要

event.target.options[event.target.options.selectedIndex].id - 您的代码中暂时不会显示该ID。

为什么我的URL [object％20Object]在API调用中？

2 个答案: