Javascript 关于承诺的问题

我的承诺尚未兑现，无法及时解决。当我尝试使用async等待一个值时，我最终得到的结果是“对象作为React子对象无效（找到：[object Promise]）。如果要呈现子对象的集合，请使用数组。”这可能是因为我调用了这个特殊的方法，试图使用它在呈现生命周期方法中返回承诺。嗯，我试着使用.then来检索值，但也不起作用

我将列出几个文件，并尽我所能解释什么是做什么的，如果有更好的方法来做我想做的事情，建议将是非常好的！如果可以修复，那就更好了！非常感谢您的帮助

App.js（主应用程序） 组件 -Navigation.js（导航栏） -js（主内容：单击导航项后，主内容中的所有内容都会更改）

MainContent.js

tabHandler = (tab) => {
//what do I do here? Immediately if I place the async keyword in the definition, the compiler hates me, but if I don't, then I don't get what I want.

    const test = this.props.tabAPICall(tab).then(value => { console.log(value) })
    console.log(test);

    //if(tab === all the different navigation tabs, render stuff differently){
    //as an example:
    // return <Songs />
    //}
    //else 
}

render(){
const { chosenTab } = this.props;

    return (
        <React.Fragment>


    <ul.className="main-content">
            {
                chosenTab !== "" ? this.tabHandler(chosenTab) : null
            }
        </ul>
    </React.Fragment>
)

---

chosenTab在应用程序级别得到更新，以触发重新渲染，这正是我想要的

您应该将从API获取的数据设置为组件状态。并在以下状态下显示数据：

在tabHandler中，获取数据后，通过setState（{song:value}）将其设置为this.state.song。当中处于状态的数据发生更改时。React将执行重新渲染，并将状态为的新数据注入组件

constructor() {
   this.state = { song: null }
}

componentDidMount() {
    this.tabHandler(this.props.chosenTab)
}

componentWillReceiveProps(nextProps) {
    if (nextProps.chosenTab != this.props.chosenTab) {
        this.tabHandler(nextProps.chosenTab)
    }
}

tabHandler = (tab) => {
//what do I do here? Immediately if I place the async keyword in the definition, the compiler hates me, but if I don't, then I don't get what I want.

    this.props.tabAPICall(tab).then(value => { this.setState({ song: value }) })
}

render(){
    const { chosenTab } = this.props;

    return (
        <React.Fragment>


    <ul.className="main-content">
            { this.state.song ? <Song someProp={song} /> : null }
        </ul>
    </React.Fragment>
)

constructor（）{
this.state={song:null}
}
componentDidMount（）{
this.tabHandler（this.props.chosenTab）
}
组件将接收道具（下一步）{
if（nextrops.chosenTab！=this.props.chosenTab）{
this.tabHandler（nextrops.chosenTab）
}
}
tabHandler=（tab）=>{
//我在这里该怎么办？如果我在定义中放置async关键字，编译器会立即讨厌我，但如果我不这样做，那么我就得不到我想要的。
this.props.tabAPICall（tab）.then（value=>{this.setState（{song:value}}）}）
}
render（）{
const{chosenTab}=this.props；
返回(
{this.state.song？：null}

)

if（data）{console.log（data）}如果这是为了辨别我是否正在从调用中获取信息，那么是的，我已经尝试过了，所以我以前确实尝试过，这会让我进入无限重渲染，可能是因为我的其余代码是如何设置的。我会加倍，看看你在尝试做什么，但让tabHandler在componentDidMount onl上调用y触发一次，而我需要tabHandler在每次单击导航项时触发。你可以添加componentWillReceiveProps来处理。我已经编辑了我的答案。好吧，很好，但我遇到了同样的问题，API调用返回了一个挂起的Promise。我让它进行了一些修补，但这其中大部分是co德是对的，谢谢！

constructor() {
   this.state = { song: null }
}

componentDidMount() {
    this.tabHandler(this.props.chosenTab)
}

componentWillReceiveProps(nextProps) {
    if (nextProps.chosenTab != this.props.chosenTab) {
        this.tabHandler(nextProps.chosenTab)
    }
}

tabHandler = (tab) => {
//what do I do here? Immediately if I place the async keyword in the definition, the compiler hates me, but if I don't, then I don't get what I want.

    this.props.tabAPICall(tab).then(value => { this.setState({ song: value }) })
}

render(){
    const { chosenTab } = this.props;

    return (
        <React.Fragment>


    <ul.className="main-content">
            { this.state.song ? <Song someProp={song} /> : null }
        </ul>
    </React.Fragment>
)