Question

我需要在我的反应页面的每个选项卡（技术）上显示我的项目列表。每个选项卡上将有多个项目。

Projects.js

    returnCard = (objJSON) => {

    const projects = Object.values(objJSON);
    var projectList = projects.map(
        (project, index) => {
            console.log('index = ', index, 'Project Name = ', project.projectName) 
// this gives me the right values, yet nothing is rendered if I remove the "async await from toggleCategories()"

            return (
                <div>
                    <h1>QWERTY</h1>
                    <Project key={index} projectName={project.projectName} projectDescription={project.projectDescription} />

                </div>
            )
        })

}

toggleCategories = async() => {
    const arrReact = [
        {
            projectName: 'todo-app',
            projectDescription: " Sample Description "
        },
        {
            projectName: 'react-project-2',
            projectDescription: " Sample Description "
        },
        {
            projectName: 'react-project-3',
            projectDescription: " Sample Description "
        },
    ];


    const arrNode = [
        {
            projectName: 'node-project-1',
            projectDescription: " Sample Description "
        },
        {
            projectName: 'node-project-2',
            projectDescription: " Sample Description "
        },
        {
            projectName: 'node-project-3',
            projectDescription: " Sample Description "
        },
    ];

在此处调用returnCard（）函数

    if (this.state.activeTab === 0) {
        return (await this.returnCard(arrReact));
    }
    else if (this.state.activeTab === 1) {
        return (await this.returnCard(arrNode));
    }

}

使用togglecategory函数进行渲染

render() {
    return (
        <div className="category-tabs">
            <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
                <Tab>React-Redux</Tab>
                <Tab>Node.js</Tab>
            </Tabs>
            <Grid className="projects-grid">
                <Cell col={12}>
                    <div>{this.toggleCategories()}</div> // this line throws the error
                </Cell>
            </Grid>
        </div>
    )
}

}

这是我遇到的错误：

“对象作为React子对象无效（找到：[object Promise]）。如果要渲染子对象的集合，请改用数组。”

Answer 1

SHIRTS | tax (Shirts) | STOCKS | tax (Stocks) | TOTAL
-----: | -----------: | -----: | -----------: | -----:
  1200 |           35 |    500 |           35 |    570
 TOTAL |           35 |    500 |           35 |    570

如何在React（JSX）中显示项目列表（键值对）？

1 个答案: