Question

我一直在尝试从react中的数组中获取一张表，但我似乎无法使其正常工作。通常，我从数据库中获取数据，但是要对其进行测试，我只是自己制作阵列，因此我知道数据是好的。我已经尝试过用div和React.Fragment包围地图代码，就像我看到的示例一样，但是仍然没有呈现任何数组。所有其他组件都很好。我一直在努力修复此问题，已花费了数小时，因此将不胜感激。

import React, { Component } from 'react';
import './RankingsPage.css';
import AddGamePage from './AddGamePage'

class RankingsPage extends Component {

  constructor(props){
    super(props);
    this.getHeadToHeadPage = this.getHeadToHeadPage.bind(this);
    this.updateTable = this.updateTable.bind(this);

    let tableData = [];
    this.state = {
      tableRows: tableData
    }

    let body = {
      method: 'GET',
      headers: {
        'Accept': 'application/json'
      }
    }
    /*fetch('./GetRankings.php', body).then((response) => response.json()).then((json) => {
      if(json['Status'] === 'ConnectionError') {
        alert('Database Connection error! Please try again!');
      } else {
        for(let key in json['Rankings']){
          tableData.push({
            'Name': key,
            'Wins': json['Rankings'][key]['Wins'],
            'Losses': json['Rankings'][key]['Losses'],
            'Rank': json['Rankings'][key]['Rank']
          });
        }
        console.log(tableData);
        this.updateTable(tableData)
      }
    }).catch((error) => {
      alert('File Connection Error! Please try again!');
      console.log(error);
    });*/
    tableData.push({'Name': 'Bob', 'Rank': 10, 'Wins': 3, 'Losses': 2});
    this.updateTable(tableData);
  }

  updateTable(tableData) {
    console.log(tableData);

    this.setState((prevState, props) => {
      return {tableRows: tableData}
    });
    console.log("Updating: "+JSON.stringify(this.state.tableRows[0]['Name']));
  }

  getHeadToHeadPage(e) {
    this.props.changePage(<AddGamePage />);
  }

  render(){
    console.log('From render: '+this.state.tableRows);
    return(
      <center className = 'center'>
        <table>
          <tbody>
            <tr>
              <th>Name</th>
              <th>Score</th>
              <th>Wins</th>
              <th>Losses</th>
            </tr>
            {this.state.tableRows.map((value, index) => {
              <tr key={index}>
                <td><a href='#' onClick = {this.getHeadToHeadPage}>{value['Name']}</a></td>
                <td>{value['Rank']}</td>
                <td>{value['Wins']}</td>
                <td>{value['Losses']}</td>
              </tr>
            })}
          </tbody>
        </table>
      </center>
    );
  }
}

export default RankingsPage;

Answer 1

React的常见错误-您的地图回调未返回任何内容。

您可以显式返回tr或删除函数主体周围的花括号，可以选择将它们替换为圆形，以提高可读性。

{this.state.tableRows.map((value, index) => (
    <tr key={index}>
        <td><a href='#' onClick = {this.getHeadToHeadPage}>{value['Name']}</a></td>
        <td>{value['Rank']}</td>
        <td>{value['Wins']}</td>
        <td>{value['Losses']}</td>
    </tr>
   )
 )}

Answer 2

您需要在this.state.tableRows.map内部使用return语句。

反应不渲染数组中的组件

2 个答案: