Question

我正在尝试创建一个动态表，该表呈现基于

格式插入的数据

{headers: ["header1", "header2"], rows: [["data1", "data2"], ["moredata", "wowoso muchdata"]]}

行仅仅是一个数组数组，每个数组都是表中的一行。

我将此数据传递到呈现表的React组件中。代码如下：

export default class StandardTable extends React.Component<Props, State>{
    constructor(props){
        super(props);

        this.state = {
            tableData: this.props.data
        }
    }

    render(){
        return(
            <div>
            <table id="StandardTable">
                <tbody>
                {this.state.tableData.headers.map(function(header){
                    <th>{header}</th>
                })}
                </tbody>
                <tbody>
                {this.state.tableData.rows.map(function(row){
                    <tr>
                        {row.map(function(rowItem){
                            <td>{rowItem}</td>
                        })}
                    </tr>

                })}
                </tbody>
            </table>
                <style jsx>
                    {`
                    #StandardTable{
                        border: 1px solid black;
                    }`}
                </style>
            </div>
        );
    }




}

我能够控制台记录数据对象，并且所有数据都在那里。正如我可以在控制台中检查的那样，它还在地图功能中的数据之间进行迭代，但是不幸的是，该表在实践中显示为空白。

Answer 1

您可以尝试一下，不需要返回，可以使用箭头功能

        <table id="StandardTable">
            <tbody>
            {this.state.tableData.headers.map((header) => (
                <th>{header}</th>
            ))}
            </tbody>
            <tbody>
            {this.state.tableData.rows.map((row)=>(
                <tr>
                    {row.map((rowItem)=>(
                        <td>{rowItem}</td>
                    ))}
                </tr>

            ))}
            </tbody>
        </table>

希望它会起作用。

Answer 2

return中没有map

this.state.tableData.rows.map(function(row){
                   return( <tr>
                        {row.map(function(rowItem){
                           return <td>{rowItem}</td>
                        })}
                    </tr>)

                })

Answer 3

这是因为您忘记了return。只需在地图功能中执行此操作即可：

            {this.state.tableData.headers.map(function(header){
                return <th>{header}</th>
            })}

动态<table>不呈现数据

3 个答案: