无法从函数读取返回的数据

Question

我正在使用 reactJS。

我有一个看起来像这样的子组件：

const Child = ({callback}) => {
    const handleSubmit = async e => {
        console.log(await callback()); //callback returns an async value
    }
    return (
        <div> some stuff here </div>
    )
}
export default Child;

我在父组件上使用我的子组件，例如：

const Parent = () => {
    const sendSomeDataToServer = () => {
        axios({
             //some stuff here...
        })
        .then((res) => return {serverInfo: 'OK'})
        .catch((err) => {
            if(err.response.status < 500)
                return {serverInfo: 'e.response.data'}
            else
                return {serverInfo: 'Unexpected error'}
        }
    }

    return (
        <Child callback={sendSomeDataToServer} />
    )
}
export default Parent;

但我不知道为什么sendSomeDataToServer 的返回值总是未定义...

看起来 await 没有按预期工作，知道如何解决这个问题吗？

Answer 1

你忘记在axios之前添加return语句

您没有从 sendSomeDataToServer 函数返回任何内容。

const Parent = () => {
    const sendSomeDataToServer = () => {
      return  axios({
             //some stuff here...
        })
        .then((res) =>  ({serverInfo: 'OK'}))
        .catch((err) => {
            if(err.response.status < 500)
                return {serverInfo: 'e.response.data'}
            else
                return {serverInfo: 'Unexpected error'}
        }
    }

    return (
        <Child callback={sendSomeDataToServer} />
    )
}