异步等待在 reactjs 中的行为不符合预期答案

【问题标题】：async await not behaving as expected in reactjs异步等待在 reactjs 中的行为不符合预期
【发布时间】：2020-09-10 11:12:24
【问题描述】：

我有

  const [data, setData] = useState([]);
  const getData = async () => {
    const { data } = await axios.get('/getData');
    setData(data.payload);
  };

和一个从后端调用handleDelete的按钮

  const handleDelete = async () => {
    checked.forEach(async (element) => {
      await axios.delete('/deleteData', {
        data: { data: element },
      });
    });
    await getData();
    console.log(data);
  };

数据从后端删除，我的组件依赖于 React 中的数据，由于某种原因，数据没有被更新。组件未使用新值进行更新。

有谁知道我可能做错了什么？非常感谢任何帮助。

【问题讨论】：

它可能与您使用.forEach()的方式有关。数据可能已从后端正确删除，但不是在您请求实际获取数据之前。 getData 不会等到 forEach 完成后再开火。看到这个问题：stackoverflow.com/questions/37576685/…
这能回答你的问题吗？ Using async/await with a forEach loop
@zero298 非常感谢！就是这样！我不知道 foreach 不会等待。每天学习新东西！

标签： reactjs async-await

【解决方案1】：

尝试对您的请求使用异步迭代器，看看它是否有效。

您可以阅读有关异步迭代器的详细信息here

const handleDelete = async () => {
    for await (const element of checked) {
        await axios.delete('/deleteData', {
        data: { data: element },
      });
    }
    await getData();
    console.log(data);
  };

【讨论】：

【解决方案2】：

感谢 zero298 回答这个问题。这是由于 forEach 循环触发了 await 调用而不是等待。我改成了 for..of，它现在可以工作了！

【讨论】：