web-dev-qa-db-ja.com

反応コンポーネントでの非同期待機の使用

そこで、私が提供する小道具を使って投稿リクエストを打ち消すコンポーネントを作成しました。

私は非同期に精通していますが、何らかの理由でこれが満たされたプロミスの実際の値を返すようにできず、代わりに保留になるだけです。

私は約束が解決されていないことを理解しているので、より多くの関数でラップしてみました。

何かが足りないような気がします。

以下の私のコードのサンプル

export default class PostController extends React.Component {
constructor(props) {
    super(props)
}
Wrapper = (body) => {
    try{
        let x = this.Send(body);
        return x;
        console.log(x)
    }catch(e){console.log(e)}
}
Send = async (body) => {
        try{
            let data = await this.Post(body);
            return data;
        }catch(e){console.warn(e)}       
}
Post = async (body) => {
    try{
        const options = {
            method: 'POST',
            uri: 'XXXXXXXXXXXXXXXXXXXX',
            body: body
        }
        const data = await rp(options);
        return data; 
    }catch(e){console.warn(e)}
}
render(props) {
    let jsonBody = JSON.stringify(this.props.data)
    const returnData = this.Wrapper(jsonBody)
    console.log(returnData)

        return(
            <div>
                 {(!this.props.data.pw) ? 'Retrieved Password: ' + returnData.message : 'Generated PassWord!:' + returnData.message }
            </div>
        )
    }

}

javascriptreactjspromiserequest-promise
4
Scottt

コンソールにreturnDataを記録する前に、Wrapper関数を非同期としてマークして待機することをお勧めします。また、Wrapper内のSend（）を待ちます。

0
Shrijit Pandey