如何在反应中将同步数据从函数发送到基于类的组件？

Question

Hi I am learning asynchronous data handling in JavaScript and react. I want to make the data provided by an asynchronous functional component available in the state of a class based component.

However I have the problem to actually access the received data in the state of my class based component.

Here is my asynchronous functional component that returns a value:

export function validateAudioFile () {


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

  }

Here is my class based component that receives the value:

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>
    );
  }
}

I would like to use the data for conditional rendering and other things, that's why I need it in my state.

I am happy for any clarification.

Answer 1

You have a list of problems here, but the main one is:

setState is an async function, so you need to use callback when actually state is changed.

so your function should looks like:

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

As you validationReady relies on the previous value of the state.

Answer 2

Your code needs a lot of improvement. First of all, in order to make an async call you need a class component(or functional component with hooks),otherwise your app will not be able to detect changes when the data arrives(which is the whole point of state in react).

Also i cannot think of a single usecase where you need a separate component just to call a function. You might as well define that function in your 'AudioUploadView' component. If you have such a usecase then use hooks in your functional component.

Furthermore, your function call 'validateAudioFile()' is not going to return anything at all since the return statement is defined in the anonymous function inside setTimeout.

Also keep in mind the point made above by @Jlexyc.