React父子组件传值回调如何改造为async/await避免初始值undefined

问题根因 #

你不需要把handleCallback改造为async/await形式，你遇到的问题是回调调用时机错误，和异步无关：

• handleCallback是留给子组件传值时触发的回调函数，你直接在父组件渲染逻辑中无参调用handleCallback()，自然拿到的返回值是undefined
• 你在父组件的渲染流程中直接调用setCallback，会触发无限重渲染的问题

正确实现方案 #

把state更新的判断逻辑直接放到handleCallback内部即可，只有子组件主动传值触发回调时，才会执行state更新逻辑：

修改后的父组件代码 #

const ParentComponent = () => {
    // 初始值按需求设为false即可，对应未拿到符合要求的子组件传值的状态
    const [callback, setCallback] = useState(false);

    // 只有子组件传值触发该函数时，才会执行内部逻辑
    const handleCallback = (childData) => {
        console.log(childData);
        // 直接在回调内判断子组件传值，更新父组件state
        setCallback(childData === "success" || childData === "error");
    };

    // 把回调函数作为props传给子组件
    return (
        <ChildComponent dataValue={handleCallback}/>
    )
}

修改后的子组件代码 #

不要在JSX返回值中直接调用回调函数，会导致每次渲染都重复触发父组件回调，建议用useEffect控制触发时机：

import { useEffect } from 'react';

const ChildComponent = ({dataValue}) => {
    const callback = thisData[index].value;
    // 仅在callback值变化时，向父组件传值
    useEffect(() => {
        dataValue(callback);
    }, [callback, dataValue])

    return (
        <div>子组件内容</div>
    )
}

修改后父组件的state只会在子组件传值后更新，不会出现初始undefined的问题。

内容的提问来源于stack exchange，提问作者WasteOfADrumBum