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

Posted 2023-02-22

【中文标题】React 状态未更新，尝试使用 ES6 语法

【英文标题】：React state is not updating, trying to use ES6 syntax

【发布时间】：2020-03-25 18:54:09

【问题描述】：

为什么状态没有更新？我已检查我是否以正确的形式从 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]
    ))
   

【问题讨论】：

难道你不想做类似this.setState( currencies: response.data ); 的事情吗？您的代码似乎不正确，因为您正在映射每个响应数据元素并调用 setState

也许这是一个糟糕的解决方案，但我收到的数据是多个 JSON 对象的形式，我只想显示一个对象中的一个值。

@DanielDunér 检查我的答案，您可以将代码减少到一个 setstate 调用

【参考方案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]

【讨论】：

谢谢，我发现我所做的事情有问题。这为我解决了。

哦，是的。这让我想起了为什么我切换到 vue.js。

【参考方案2】：

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

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 之后，您可能无法看到结果，而是尝试在您的渲染方法中登录控制台

【讨论】：

map 函数返回一个数组，如果你要使用push，我建议你改用forEach。 @Gabriele 的回答有正确的做法。

是的，我们也可以直接使用 assign .. 可能这是更好的方法，我现在将编辑