CODEWITHSUNDEEP
javascriptnode.jsreactjsecmascript-6async-await
reactdontact
reactdontact

Reputation: 53

Promise { <state>: "pending" } - Should we use .then after async / await? Confused

I have just started learning JavaScript and am building an application using React. I am struggling with an issue and would appreciate your help. I did come across similar questions but wasn't convinced with the answers and they didnt help me. Please find my issue below . I am hiding the real name of the variables , components .

myService.js 

export const findThisById = async Id=> {
  const response = await fetch(`${URL}/${Id}`);
  const json = await response.json();
  return json;
};

myContainer.js // This is the parent component which has many chil component

        .......
     import {findThisById} from "../myService"

            findThis= async Id=> {
            const xyz= await findThisById(Id);  
            return xyz;

         <Component1 findThis = {this.findThis}/>
        ......

Component1.js

const Component1 = ({findThis}) => (

<Component2 findThis = {findThis} id = {Id} // Id is being passed successfully 
   />

)

Component2.js

    class Component2 extends React.Component {
      constructor(props) {
        super(props);
        console.log("Inside Constructor");
        const something = this.props.findThis(this.props.id); 
        // course.then(data => console.log(data) // This works, i get the right data
        )
        console.log(something ); // Using this i get Promise state pending    
      }

 // I need to use this value "something" inside a <h1></h1>

}

I have ommited all exports/imports but they work correctly The network tab in the console also make a 200 request and the response sub tab shows the correct values. Should i use .then when i call the function findThis? Why? I am using await for fetch and its response. Please help me. Struggl

Upvotes: 0

Views: 440

Answers (1)

bingles
bingles

Reputation: 12203

As mentioned in one of the comments async / await is just syntactic sugar for promises, so generally speaking you can either await or .then the result of findThis. That said, since you are calling this inside of a constructor function you won't be able to use await since the constructor isn't an async function.

One way to get the result of the Promise to render in your component would be to set the result in the component state and then render from the state. As mentioned by @Emile Bergeron in a follow up comment, you probably don't want to call setState in your constructor but instead in componentDidMount. This is to avoid calling setState on a potentially unmounted component.

class Component2 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchResult: ''
    } 
  }

  componentDidMount() {
    this.props.findThis(this.props.id).then(searchResult => {
      this.setState({
        searchResult
      })
    });  
  }

  render() {
    return <div>{this.state.searchResult}</div>
  }
}

Upvotes: 3

Related Questions