0

请注意，问题与 useState 的异步性质无关。它是异步 的，在这里得到了很好的回答：useState set 方法不会立即反映变化请不要将其与那个混淆！我已经使用 useEffect 让按钮工作，正如在 codepen 中共享的那样

我的问题是我可以在主要组件中添加/包含任何异步函数吗？主组件：HelloWorld 子功能：interestShown => 这可以是异步的吗？在示例中，我使用 console.log 输出尽可能地简化了它。

这是一条可取的路线还是我在尝试一些奇怪的事情？

我曾尝试寻找解决此问题的方法，但我认为所有答案都将我引向课程，如果可能的话，我希望在 React 功能组件中实现这一点。

我已经定义了这样的状态： const [interested, setInterested] = React.useState(false)

当我调用这个函数时：

function interestShown() {
      console.log("Before Set State fired", interested)
      setInterested(!interested)
      console.log("After Set State Fired", interested)
    }

状态更改后控制台日志需要显示更改后的状态，我无法做到这一点，我尝试了很多选项

我的问题在这个代码笔中：https ://codepen.io/deepeshkr/pen/PowQWwv

控制台日志输出：

pen.js:6 在设置状态触发之前为假

pen.js:8 After Set State Fired false => 这应该是真的，但我猜这是异步更改，这是我的问题，如何在状态更改后触发这个？

pen.js:14 Fire only it's true true

有类似的听起来问题，但我不确定他们问的问题与我问的问题相同，或者问题是否得到很好的解释以证明问题。

4

2 回答 2

1

是的，它是异步的。因此，您不会立即看到更改。

从setState()文档中：

该setState()函数用于更新状态。它接受一个新的状态值并将组件的重新渲染排入队列。

您可以使用useEffect()钩子从文档中捕获状态更改：

函数组件的主体（称为 React 的渲染阶段）中不允许发生突变、订阅、计时器、日志记录和其他副作用。这样做会导致 UI 中出现令人困惑的错误和不一致。

您可以像这样导入它：

import React, { useState, useEffect } from 'react';

以下代码片段将帮助您记录interested状态更改：

useEffect(() => {
   console.log(interested);
}, ['state has changed', interested]);

我希望澄清。

于 2020-01-07T19:26:47.407 回答
0

我得到了一种方法，我可以使用效果对功能组件进行异步请求，在这里发布它可以帮助其他人，

  React.useEffect(() => {
    if (showReport) {
      fetch("https://website.com/json")           // Get the data external or internal
        .then(res => res.json())
        .then(ip => Promise.all([ip, getSomethingElse()]))    // Get something else, again external or internal function call
        .then(([ip, gp]) => {
          setData(gp);                               // Update the state
          setIp(ip);
          setShowReport(false);
        });
    }
  }, [showReport]);

希望这对其他人有帮助

于 2020-02-06T17:26:01.910 回答