在 TYPESCRIPT 中返回的 setState [重复]答案

【问题标题】：setState with return in TYPESCRIPT [duplicate]在 TYPESCRIPT 中返回的 setState [重复]
【发布时间】：2022-03-01 23:02:38
【问题描述】：

糟糕，我的朋友们，我在使用 setState 时遇到了这个“问题”，因为 setState 不是异步的，所以我不能按照我想要的方式使用它。我设置了该值，并在调用该函数以发送回该值时以“延迟”返回。我该如何解决这个问题？

  const [quantityProduct, setQuantityProduct] = useState<number>(0);

function addQuantity() {
    var soma = Number(quantityProduct) + 1;
    setQuantityProduct(soma);
    sendProduct()
}
  
function sendProduct() {
    console.log(quantityProduct)
}

【问题讨论】：

你想在函数 sendProduct 中使用 quantityProduct 的更新值，是吗？
将useEffect与quantityProduct的依赖一起使用
这不是关于 Typescript 的问题，而是关于 React 如何处理异步状态更新的问题。
@Andy，在 javascript 中可以使用这种语法，“ this.setState({ title: event.target.value }, function() { this.validateTitle(); });”在打字稿中我不能使用这种语法
@RodineiCirineu 这不是真的。您正在将基于类的状态语法与钩子语法进行比较。它与打字稿无关。

标签： javascript reactjs typescript react-tsx

【解决方案1】：

问题在于以下两行是异步的。你所经历的是第二行在完成第一行之前被执行。

setQuantityProduct(soma);
sendProduct();

您的意思是在 quantityProduct 更新时调用 sendProduct。您应该在依赖数组中使用 useEffect 钩子和 quantityProduct。

尝试如下。

  const [quantityProduct, setQuantityProduct] = useState<number>(0);
  function addQuantity() {
    var soma = Number(quantityProduct) + 1;
    setQuantityProduct(soma);
  }

  function sendProduct() {
    console.log(quantityProduct);
  }

  useEffect(() => {
    sendProduct();
  }, [quantityProduct]);

第二种方式：在setState回调中调用API

  function addQuantity() {
    setQuantityProduct((prevQuantity) => {
      var newQuantity = Number(prevQuantity) + 1;
      sendProduct(newQuantity);
      return newQuantity;
    });
  }

【讨论】：

useEffect 是唯一的方法吗？当 setState 更新以发送 sendProduct 请求时，是否不可能在 setState 中有一些返回？
这是通常的做法。但是，如果你在 setState 的回调中和 return 语句之前这样做，它也可以工作。
你能给我看一些 setState 回调语法的例子吗？我在 Javascript 中看到了几个示例，但是使用 Typescript 我没有找到
更新了答案！

【解决方案2】：

“setState 不是异步的”

这不是真的。 The documentation is clear on this:

React 可以将多个 setState() 调用批处理到单个更新中以提高性能。因为 this.props 和 this.state 可能会异步更新，所以不应该依赖它们的值来计算下一个状态。

您需要使用useEffect hook 来观察状态的变化（在依赖数组中传递您想要观察的状态），然后根据该变化执行操作。

const [quantityProduct, setQuantityProduct] = useState(0);

function addQuantity() {
  const soma = Number(quantityProduct) + 1;
  setQuantityProduct(soma);
}

function sendProduct() {
  console.log(quantityProduct);
}

useEffect(() => {
  sendProduct();
}, [quantityProduct]);

【讨论】：