CODEWITHSUNDEEP
javascriptreactjspromise
kekeee
kekeee

Reputation: 475

TypeError: (intermediate value).then is not a function

i use react 16, babel 7, webpack 4.

another project is working, but this project is not working. error is (intermediate value).then is not a function . i don't know what is problem... umm.. how to solve this problem? please help me.

import React, { Component } from 'react';
// import throttle from 'lodash.throttle'
import debounce from 'lodash.debounce';


class Promise extends Component {
    constructor() {
        super();
        // this.handleDebounce = this.handleDebounce.bind(this);
    }
    handleDebounce = (e) => {
        // debounce(this.handleStart, 100); // 이런식으로 쓰면 안된다!! SyntheticEvent pooling (이벤트 풀링)  참고 https://reactjs.org/docs/events.html#event-pooling
        // 콜백함수는 해당 이벤트가 실행되는 동안에만 유효함
        this.setSearchTerm(e.target.value);
    }

    setSearchTerm = debounce((searchTerm) => this.handleStart(searchTerm), 2000);

    handleStart = (value) => {
        console.log("start", value)
        this.handlePromise1(value)
            .then(text => {
                console.log(text)
            })
            .catch((err) => {console.log("err", err)})
    }

    handlePromise1 = (value) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                this.handlePromise2(resolve(value));
            }, 300);
        });
    }

    handlePromise2 = (value) => {
        return new Promise((resolve, reject) => {
            resolve(value);
        });
    }

    render() {
        return (
            <div>
                <input onKeyUp={this.handleDebounce}></input>
            </div>
        );
    }
}



export default Promise;

Upvotes: 0

Views: 21639

Answers (1)

Leela Venkatesh K
Leela Venkatesh K

Reputation: 1710

Solution: (edit 1)

The issue was not because of async but because of overriding Promise on browser. The new Promise() doesn't actually create the expected promise. Check here

No async Needed as I mentioned before this edit as below:

Stale answer (not right): just for reference: I think that issue was a missing async during declaration of handlePromise1. Because it signifies that the function is asynchronous and may return a Promise as a return value. if not specified it would treat it as any object and .then might not be available.

I just added async and found it to be working in this code

Also,the comment by @bravo is valid. You should not try to override Promise in any JS code

Upvotes: 3

Related Questions