反应 - 为什么这个组件没有渲染任何东西？

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

RowForm：

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

UPDATE：
它遍历道具线还是应该阅读：

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

PS：还请修复输入错误histroycells。

Answer 2

您的代码中存在拼写错误。 histroycells在TableWithDataBody应该是historycells。