如何从后端显示整个表格的内容?

时间:2018-09-12 12:24:07

标签: reactjs

为简单起见,我减少了代码,这里的问题是我有一堆数据,必须检索它。但是,当我尝试执行此操作时,它只是显示第一个输入的值。我希望显示所有值。如果您想要更多详细的代码,则只需注释一下。我将其粘贴。

class Main extends React.Component{
    componentWillMount(){
    this.props.fetchTableContent().then(result=> (console.log(result.payload),this.setState({rows:result.payload})))
}

    constructor(props){
        super(props);

        this.state={
           rows:this.props.table
        }
    }
render(){
    return(
         <tbody>
             { _.map(this.state.rows,(row,index)=>{
                 return(
                      <TableItems
                          key={index}
                          index={index}
                          row={row}
                          />
                        );
                    })
                    }
          </tbody>)}

function mapStateToProps(state){
    return {table: state.table};
}

export default connect (mapStateToProps,{fetchTableContent})(Main);

TableItems

 <tr>
       <th scope="row" className="mycheckbox"><input type="checkbox"/><label></label></th>
        <td>{this.props.row.name}</td>
        <td>{this.props.row.avgGrade}</td>
        <td>{this.props.row.occupation}</td>
    </tr>

1 个答案:

答案 0 :(得分:0)

我可能只是不熟悉您使用的语法,但我认为render函数必须看起来像我下面的内容

    render(){
return(
     <tbody>
         { this.state.rows.map((row,index)=>{
             return(
                  <TableItems
                      key={index}
                      index={index}
                      row={row}
                      />
                    );
                })
                }
      </tbody>)}

现在正在this.state.rows上调用地图。如果将其传递到括号内,则将其作为函数进行传递,我不确定会导致哪种问题。