如何将函数转换为 ASYNC AWAIT

Question

目前，我正在将值从子组件传递给 React 中的父组件。

const ParentComponent = () => {
    const [callback, setCallback] = useState(null);

    const handleCallback = (childData) => {
        console.log(childData);
        return childData;
    };

    let childDataType = handleCallback();

    if (childDataType === "success") {
        setCallback(true)
    } else if (childDataType === "error") {
        setCallback(true)
    }

    return (
        <div dataValue={dataValue(callback)}/>
    )
}

const ChildComponent = ({dataValue}) => {
    let callback = thisData[index].value
    return (
        <div dataValue={dataValue(callback)}/>
    )
}

我正在尝试使用该值来设置状态。如果子项的值等于字符串，则状态为真，否则为假。

现在我可以在 handleCallback 中获取 console.log(childData) 的数据。但是，数据首先返回未定义，然后设置为一个值。因此，它将 childDataType 设置为 undefined。这反过来将我的状态设置为未定义。

我需要让变量 childDataType 等待函数运行和 return 一个定义的值，然后再尝试设置回调的状态。如何让 handleCallback 在 return 其初始值之前等待定义的值？

Answer 1

您是否尝试使用“等待”表达方式？

 let childDataType = await handleCallback();

检查此以获取更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Answer 2

您可以将该函数更改为异步函数并等待它变为 return 值。

const handleCallback = async (childData) =>  {
        console.log(childData);
        return childData;
    };

    let childDataType = await handleCallback();

Answer 3

我喜欢做的是以下

  const handleCallback = (childData) => {
       return new Promise((resolve,reject)=>{
          resolve(childData)
       })
    };

那你可以做

 let childDataType = await handleCallback();

这是一个很好的方法，因为如果函数中发生任何错误，您只需调用 reject(error)。

如何将函数转换为 ASYNC AWAIT

How to turn a function into an ASYNC AWAIT

components

asynchronous

async-await

reactjs

use-state