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也是异步的，因此状态对于映射的每次迭代都不会更改。因此，您始终使用相同的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]}
}

Answer 2

如果您想将所有id置于状态..而不是多次调用setState，您可以先将所有id放入数组，然后使用该数组更新状态，如下所示：< / p>

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

并记住setState是一个异步调用，因此如果将console.log放在setState之后，而尝试在控制台中登录渲染方法，则可能看不到结果

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

2 个答案: