Блог

Привет, я изучаю асинхронную обработку данных в JavaScript и react. Я хочу сделать данные, предоставляемые асинхронным функциональным компонентом, доступными в состоянии компонента на основе класса.

Однако у меня проблема с фактическим доступом к полученным данным в состоянии моего компонента на основе классов.

Вот мой асинхронный функциональный компонент, который возвращает значение:

 export function validateAudioFile () {


        setTimeout(function(){ return "hallo" }, 1000);

  }
  

Вот мой компонент на основе класса, который получает значение:

 import {validateAudioFile} from './AudioFileValidation';



export class AudioUploadView extends Component {

constructor(props) {
    super(props);
    this.validationReady = this.validationReady.bind(this);



  this.state = {
    selectedFileValidated:null
  };

}

  validationReady= () => new Promise(resolve => {

    this.setState({selectedFileValidated: validateAudioFile ()}) 

    if (this.state.selectedFileValidated)

    resolve(this.state.selectedFileValidated)
})

  render() {

//validateAudioFile ()

this.validationReady()
  .then(function(v) { 
    console.log(v); // remains undefined 
  })

    return (
      <React.Fragment>

      </React.Fragment>
    );
  }
}

  

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

Я рад любым разъяснениям.

Здесь у вас есть список проблем, но основная из них:

setState — это асинхронная функция, поэтому вам нужно использовать обратный вызов, когда фактически изменяется состояние.

итак, ваша функция должна выглядеть так:

  validationReady = () => new Promise(resolve => {
    this.setState({selectedFileValidated: validateAudioFile ()}, () => {
       resolve(this.state.selectedFileValidated)
   ) 
})
  

Поскольку вы validationReady полагается на предыдущее значение состояния.

Ваш код нуждается в значительном улучшении. Прежде всего, для выполнения асинхронного вызова вам нужен компонент класса (или функциональный компонент с перехватами), иначе ваше приложение не сможет обнаруживать изменения при поступлении данных (в чем весь смысл состояния в react).

Также я не могу придумать ни одного случая использования, когда вам нужен отдельный компонент только для вызова функции. Вы также можете определить эту функцию в своем компоненте AudioUploadView. Если у вас есть такая возможность использования, используйте перехваты в вашем функциональном компоненте.

Кроме того, ваш вызов функции ‘validateAudioFile ()’ вообще ничего не вернет, поскольку оператор return определен в анонимной функции внутри setTimeout.

Также имейте в виду замечание, сделанное выше @Jlexyc.