javascript - React 状态未更新，尝试使用 ES6 语法

Question

为什么状态没有更新？我已经检查过我是否以正确的形式从 api 接收数据。如果我更改结果而不是尝试将其添加到新数组并将其置于状态，我可以打印结果。我还检查了它是否存在于范围内，据我所知，它应该可以工作，因为我使用的是箭头函数。在 map 函数之后我仍然收到一个空数组。

我错过了什么？

class CurrencyForm extends React.Component {
  state = {
    currencies: [],
  }
  componentDidMount(){
   this.fetchCurrencies();
  }

  fetchCurrencies = async () => {
    const response = await axios.get('some address')
    response.data.map(currency => 
    this.setState({currencies: [...this.state.currencies,currency.id]}
    ))
   }

Answer 1

问题是您正在使用 [...this.state.currencies, currency.id]。

因为 setState 也是异步的，所以 map 的每次迭代状态都不会改变。所以你总是使用相同的 this.state.currencies。这意味着您应该只获取最后添加的 currency.id。

您应该使用 setState 的函数版本

this.setState((state) => ({currencies: [...state.currencies,currency.id]}));

或者简单地做 map 并使用结果数组来设置状态

fetchCurrencies = async () => {
    const response = await axios.get('some address');
    const currencyIds = response.data.map(currency=>currency.id);
    this.setState({currencies: [...this.state.currencies,...currencyIds]}
}