未解决：使用 ant design select 更改状态答案

【问题标题】：unsolved: change state with ant design select未解决：使用 ant design select 更改状态
【发布时间】：2019-11-14 06:03:03
【问题描述】：

info: api im 调用有一个名为 vs_currency 的参数。默认情况下，我需要 vs_currency 为“usd”。不过，id 喜欢使用 select 组件在至少两个其他资产（“btc”和“eth”）之间进行选择。我想我希望整个表格在选择时重新加载

constructor(props) {
  super(props);
  this.state = {
      vs_currency: 'usd',
  }
}

handleOnChange = (value, event) => {
    this.setState({ vs_currency: value})    
    console.log(this.state.vs_currency);   
}

componentDidMount() {

  var vs_currency = this.state.vs_currency;

  axios.all([
     axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=' + vs_currency + '&order=market_cap_desc&per_page=250&page=1&sparkline=true&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C1y'),
     axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=' + vs_currency + '&order=market_cap_desc&per_page=250&page=2&sparkline=true&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C1y'),

...
}
render() {

  return (
     <Select key='1' defaultValue="usd" style={{ width: 80 }} onSelect={(value, event) => this.handleOnChange(value, event)}>
        <Option value="usd">$ USD</Option>
        <Option value="btc">Ƀ BTC</Option>
        <Option value="eth">Ξ ETH</Option>
     </Select>

我目前拥有的允许我在下拉列表中选择其他资产，但实际上并没有重新加载表格并显示更新的货币:(

【问题讨论】：

您如何更改这些值？来自 axios 请求，如果是，那么我没有看到选择组件中使用 axios 响应。

标签： javascript reactjs antd

【解决方案1】：

首先，您需要返回您从 API 获得的响应。

如果您收到回复，您可以像这样修改您的课程：- 例如：-

constructor(props) {
  super(props);
  this.state = {
      Lenders: [],
      selectedLender: ""
  }
}

<select
 className="form-control"
 value={this.state.selectedLender}
 onChange={e =>
 this.setState({ selectedLender: e.target.value })
 }
>
  {this.state.Lenders.map(lender => (
  <option key={lender.value} value={lender.value}>
    {lender.display}
  </option>
  ))}
</select>

getNames = () => {
    fetch(
      `${environment.apiURL}`
    )
      .then(response => {
        return response.json();
      })
      .then(data => {
        let LendersFromApi = data.map(lender => {
          return { value: lender, display: lender };
        });
        this.setState({
          Lenders: [{ value: "", display: "Select" }].concat(
            LendersFromApi
          )
        });
      })
      .catch(error => {
        console.log(error);
      });
  };

然后在 componentDidMount 或 componentWillMount 中调用这个 getNames()

【讨论】：