Question

我正在尝试显示从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不是函数”，我不明白问题是什么..？

......

Answer 1

您不应在render方法中定义类函数。

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

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

Answer 2

问题：

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

修复：

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

Answer 3

好的，我按照下面的方法修复了它。也许不是解决这种情况的最佳方法，但确实可以完成工作。

下面的代码在类之下，但在render之外 TabularData（items）{ var elements = [];

    for(let i=0;i<items.data.length;i++)
    {
        elements.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 elements;
}

下面的代码进入渲染器

{this.TabularData(items)}

在表内反应打印API数据

3 个答案: