React - 为什么这个组件不渲染任何东西？

Question

我正在尝试在父组件中渲染一些子组件，但没有渲染。我没有收到任何控制台错误，但没有渲染。我无法弄清楚为什么会发生这种情况。我正在开发的应用程序是使用 React 构建的，使用通量架构。

这是我的代码：

父组件：

import React from 'react';
import TableWithDataHeader from './TableWithDataHeader.jsx';
import TableWithDataBody from './TableWithDataBody.jsx';
import TableWithDataRowForm from './TableWithDataRowForm.jsx';
import AppStore from '../../stores/AppStore';

export default class TableWithData extends React.Component {
    state = {rows: [], isEditing: false};

    componentDidMount() {
        let json = AppStore.getCells();
        let rows = this.state.rows;
        for (let key in json) {
            {rows[key] = json[key]};
        }
        this.setState({rows});
        console.log(rows);
    }

    handleEdit = (row) => {
        this.setState({isEditing: true});
    };

    editStop = (formKey) => {
        this.setState({isEditing: false});
    };

    handleSubmit = () => {
        console.log('hello');
    };

    render() {

        let {rows, isEditing} = this.state;

        console.log(rows);

        return (
            <div>
                <div className="row">
                    <table className="table table-striped">
                        <thead>
                            <TableWithDataHeader />
                        </thead>
                        <tbody>
                            {rows.map(row => this.state.isEditing ? 
                                <TableWithDataRowForm formKey={row.id} key={row.id} editStop={this.editStop(formKey)} handleSubmit={this.handleSubmit} /> : 
                                <TableWithDataBody key={row.id} value={row.historycells.contents} handleEdit={this.handleEdit(row)} />
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

行表单：

import React from 'react';

export default class TableWithDataRowForm extends React.Component {

    editStop = () => {
        this.props.editStop();
    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.handleSubmit();
    };

    render() {
        return (
            <tr>
                <td></td>
                <td>
                    <button className=""><i className="btn btn-default" onClick={this.editStop}></i>Cancel</button>
                    <button className="btn btn-success"><i className="fa fa-cloud" onClick={this.handleSubmit}></i>Save</button>
                </td>
            </tr>
        );
    }
}

表头：

import React from 'react';
import AppStore from '../../stores/AppStore';

export default class TableWithDataHeader extends React.Component {

    addHeaders() {
        let headerArray = AppStore.getTable().columns;
        let headerList = headerArray.map((element, index) => {
            return (
                <th key={index} id={element.id} className="text-center">{element.name}</th>
            );
        });
        return headerList;
    }

    render() {
        return (
            <tr>
                {this.addHeaders()}
                <th></th>
            </tr>
        );
    }
}

表体：

import React from 'react';

export default class TableWithDataBody extends React.Component {

    handleEdit() {
        this.props.handleEdit();
    }

    render() {
        return (
            <tr>
                {this.props.histroycells.map(cell => {
                    return <Cell key={cell.id} value={cell.contents} />
                })}
                <td>
                    <button className="btn btn-primary" onClick={this.handleEdit}><i className="fa fa-pencil"></i>Edit</button>
                </td>
            </tr>
        );
    }
}

表格标题呈现正常，但表格主体或编辑表单根本不显示！

任何帮助将不胜感激，尤其是示例！

感谢您的宝贵时间！

Answer 1

也许这会有所帮助：

在您的<TableWithDataBody>组件中，您尝试访问this.props.historycells，但这不是作为道具传递的。

您使用以下方式渲染表格行：

<TableWithDataBody 
  key={row.id}
  value={row.historycells.contents} 
  handleEdit={this.handleEdit(row)} />

如果您将渲染更改为：

<TableWithDataBody 
  key={row.id}
  historycells={row.historycells}       // changed this parameter
  handleEdit={this.handleEdit(row)} />

更新：
在 props 上循环的行仍应为：

{this.props.historycells.map(cell => {

PS：请同时修正histroycells中的错字。

Answer 2

您的代码中有错字。 TableWithDataBody 中的 histroycells 应该是 historycells。