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

Question

我正在尝试在 parent 组件中渲染一些 child 组件，但没有渲染任何内容。我没有收到任何控制台错误，但没有渲染。我不明白为什么会这样。我正在开发的应用程序是使用 React 构建的，使用的是 flux 架构。

这是我的代码：

Parent 分量：

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>
        );
    }
}

Table头：

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>
        );
    }
}

Table Body:

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>
        );
    }
}

table header 渲染良好，但 table 的 body 或编辑表单根本不显示！

非常感谢任何帮助，尤其是示例！

谢谢你的时间！

Answer 1

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

Answer 2

也许这会有所帮助：

在您的 <TableWithDataBody> 组件中，您尝试访问 this.props.historycells，但这并未作为 prop 传递。

您使用以下方式呈现 table 行：

<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.

中的拼写错误

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

React - why is this component not rendering anything?

reactjs

reactjs-flux