反應 - 爲什麼這個組件沒有渲染任何東西？

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。