Обещание {<state>: "в ожидании"} - Должны ли мы использовать .then после asyn c / await? Смущенный - PullRequest
Новая
       2

Обещание {<state>: "в ожидании"} - Должны ли мы использовать .then после asyn c / await? Смущенный

0 голосов
/ 17 февраля 2020

Я только начал изучать JavaScript и собираю приложение, используя React. Я борюсь с проблемой и буду признателен за вашу помощь. Я сталкивался с подобными вопросами, но не был убежден с ответами, и они не помогли мне. Пожалуйста, найдите мою проблему ниже. Я скрываю настоящее имя переменных, компонентов.

myService. js 

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

myContainer. js // Это родительский компонент, который имеет много компонентов chil 

        .......
     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>

}

Я пропустил все операции экспорта / импорта, но они работают правильно. Вкладка «Сеть» в консоли также сделайте запрос 200, а подвкладка ответа показывает правильные значения. Должен ли я использовать .hen, когда я вызываю функцию findThis? Почему? Я использую await для получения и его ответа. Пожалуйста, помогите мне. Struggl

1 Ответ

3 голосов
/ 17 февраля 2020

Как уже упоминалось в одном из комментариев, async / await - это просто синтактика c сахар для обещаний, поэтому, вообще говоря, вы можете await или .then получить результат findThis. Тем не менее, поскольку вы вызываете это внутри функции конструктора, вы не сможете использовать await, так как конструктор не является функцией async.

Один из способов получить результат Обещание для визуализации в вашем компоненте будет состоять в том, чтобы установить результат в состоянии компонента, а затем выполнить рендеринг из состояния. Как упомянул @Emile Bergeron в последующем комментарии, вы, вероятно, не хотите вызывать setState в своем конструкторе, а вместо этого в componentDidMount. Это сделано для того, чтобы избежать вызова setState для потенциально не подключенного компонента. 

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>
  }
}
...