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

嗨，我正在学习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>
    );
  }
}

从“/AudioFileValidation”导入{validateAudioFile}；
导出类AudioUploadView扩展组件{
建造师（道具）{
超级（道具）；
this.validationReady=this.validationReady.bind（this）；
此.state={
selectedFileValidated:空
};
}
validationReady=（）=>新承诺（解析=>{
this.setState（{selectedFileValidated:validateAudioFile（）}）
if（this.state.selectedFileValidated）
解析（this.state.selectedFileValidated）
})
render（）{
//validateAudioFile（）
这是validationReady（）
.then（函数（v）{
console.log（v）；//未定义
})
返回(
);
}
}

我想使用数据进行条件渲染和其他事情，这就是为什么我需要它在我的状态

---

我很高兴得到任何澄清。

这里列出了一系列问题，但主要问题是：

setState是一个异步函数，所以当实际状态发生更改时，需要使用回调

因此，您的函数应该如下所示：

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

---

validationReady依赖于状态的先前值。

您的代码需要大量改进。首先，为了进行异步调用，您需要一个类组件（或带有钩子的功能组件），否则您的应用程序将无法在数据到达时检测到更改（这是react中的整个状态点）

此外，我想不出哪一个用例需要单独的组件来调用函数。您还可以在“AudioUploadView”组件中定义该函数。如果您有这样一个用例，那么在您的功能组件中使用钩子

此外，由于return语句是在setTimeout内的匿名函数中定义的，因此函数调用validateAudioFile（）不会返回任何内容

还要记住@Jlexyc在上面提出的观点