时间戳

首页 > 解决方案 > 反应表格内的打印 API 数据

reactjs - 反应表格内的打印 API 数据

问题描述

我正在尝试显示从 API 调用返回的数据。API 返回如下内容：

{"id":,"firm":"","office":"","salesCode":"","account":""}

我有这样的课：

    const DataConstructed = items.map((item) =>
                <TableRow>
                    <TableCell>{items.data.f}</TableCell>
                    <TableCell>{items.data.o}</TableCell>
                    <TableCell>{items.data.s}</TableCell>
                    <TableCell>{items.data.a}</TableCell>
                </TableRow>
            );

 render() {
        const { classes } = this.props; 
        const { error, isLoaded, items } = this.state;

        if (error) {
            return <div>Error: {error.message}</div>;
          } else if (!isLoaded) {
            return <div>Loading...</div>;
          } else {

            const DataConstructed = () => {
                var data = [];

                for(let i=0; i<items.data.length; i++)
                {
                    data.push(
                        <TableRow>
                            <TableCell>{items.data[i].f}</TableCell>
                            <TableCell>{items.data[i].o}</TableCell>
                            <TableCell>{items.data[i].s}</TableCell>
                            <TableCell>{items.data[i].a}</TableCell>
                        </TableRow>
                    );
                }
                return data;
            }

            return (
              <Fragment> 
                  <Paper className={classes.Table}>
                    <Table>
                        <TableHead className={classes.TableHeader}>
                            <TableRow>
                                <TableCell>F</TableCell>
                                <TableCell>O</TableCell>
                                <TableCell>S</TableCell>
                                <TableCell>A</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {this.DataConstructed()}
                        </TableBody>
                    </Table>
                </Paper>
              </Fragment>
            );
          }
    }

我收到一条错误消息“TypeError: this.DataConstructed is not a function”，我不明白问题是什么..？

……

标签： reactjsapi

解决方案

你不应该在你的渲染方法中定义你的类函数。

在您的情况下，它只是您的渲染方法中定义的常规函数​​。你仍然可以让它工作。只需从 this.DataConstructed 中删除“this”，因为它不是类函数。

<TableBody>
   {DataConstructed()}
 </TableBody>

推荐阅读