setState 可能没有被执行答案

【问题标题】：setState not being executed maybesetState 可能没有被执行
【发布时间】：2021-07-26 08:55:19
【问题描述】：

我有一个组件可以通过单击按钮从 API 中获取项目列表。名称状态变量来自输入框。我的 handleSubmit 方法的代码是：

handleSubmit(event) {
  event.preventDefault()
  this.setState({
    fetching: true
  })    
  fetch("https://example.com/v2/sites/list/"+this.state.name, {
    method: 'GET',
    })
    .then(response => async(response) => { 
    await response.json()
    this.setState({
      names: response.json()["items"],
      fetching: false,
      fetched: true
    })
    toast.success(<NotifySuccess />)
  })
  .catch(error => toast.error(<NotifyFailure />));
}

在将获取的状态值设置为 true 时，在我的渲染方法中，我试图通过门户渲染一个包含名称值的警报框，但似乎 setState 没有按预期工作。没有出现警告框，并且在通过 React 开发人员工具检查组件时，获取的状态值未更新为 true。为什么不更新？另外，当我使用开发人员工具将其设置为 true 时，会出现一个带有空值的警报框。我单击确定将其关闭，但它再次打开。必须再次按确定按钮。所以警告框也会出现两次。任何帮助，将不胜感激。谢谢。

【问题讨论】：

标签： reactjs async-await setstate

【解决方案1】：

@CertainPeformance 绝对正确，只是添加了一些更简洁的方法，以防你可以将 handleSubmit 设为异步函数。

async handleSubmit(event) {
...
try {
 const response = await fetch("https://example.com/v2/sites/list/" + 
    this.state.name, {
    method: 'GET',
 })
 const { items } = await response.json()
 this.setState({
     names: items,
     fetching: false,
     fetched: true
 })
 toast.success(<NotifySuccess />)
} catch (error) {
 toast.error(<NotifyFailure />)
};

【讨论】：

不工作。是否需要将 .json() 添加到 fetch 中？
抱歉，是的，我在 API 获取中弄错了。刚刚更新，马上查看。
谢谢，它成功了。但是现在面临另一个问题。正如我提到的，我两次收到警报框，现在我收到的次数更多，而且似乎还在不断增加。甚至无法使用输入框更改名称状态值，警报框不断出现。
我认为我刚刚注意到并且值得指出的是，您只能使用一次 response.json() 否则您会遇到错误。
该警告框问题看起来与渲染循环有关，请检查您的组件生命周期。

【解决方案2】：

response 是一个承诺。在代码的一部分中等待它不会将相同的变量转换为解析值。您需要将await的结果分配给一个变量，该变量将保存解析值，然后将其传递给setState：

fetch("https://example.com/v2/sites/list/" + this.state.name, {
    method: 'GET',
})
    .then(response => async (response) => {
        const result = await response.json();
        this.setState({
            names: result.items,
            fetching: false,
            fetched: true
        })
        toast.success(<NotifySuccess />)
    })
    .catch(error => toast.error(<NotifyFailure />));

【讨论】：

不工作。在当前代码之前我有同样的方法。没用。