Question

我遇到了有关Promises的问题，并且没有及时解决。当我尝试使用异步等待值时，最终得到的结果是“对象作为React子对象无效（找到：[object Promise]）。如果要渲染子代集合，请改用数组。 ”那可能是因为我正在调用这个特殊的方法，试图在渲染生命周期方法中返回一个Promise。好吧，我尝试使用.then来检索值，但这也不起作用。

我将整理一些文件，并尽我最大的努力解释，如果有更好的方法来做我想做的事情，那么建议会很棒！如果可以修复，那就更好了！任何帮助将不胜感激！

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

MainContent.js

while ((line = buffer.readLine()) != null) {
                System.out.println(line);
                request += line;
            }

}

tabAPICall来自App.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在应用程序级别得到更新以触发我想要的重新渲染

Answer 1

您应该将从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>
)

围绕承诺的问题

1 个答案: