Question

import React from "react";
import {
  Button,
  Form,
  FormGroup,
  Label,
  Input,
  FormText,
  Row
} from "reactstrap";
import Icon from "react-icons-kit";
import { filter } from "react-icons-kit/fa/filter";
import { pencil, bin, search } from "react-icons-kit/icomoon";
import { ic_delete, ic_create } from "react-icons-kit/md";
import { Link } from "react-router-dom";
import { activeStyle } from "../projects/Projects.css";
import {
  orange,
  contentStyle,
  displayContainer,
  pageHeading,
  hrStyle,
  buttonStyle,
  floatRight1,
  exampletable,
  savebtn1,
  bankdiv,
  btnstyle
} from "../Layout.css";
import { hyperLink } from "../settings/LayoutSettings.css";
import { Header } from "../Header";
import { Footer } from "../Footer";
import $ from "jquery";

var result = [];
var URL = "http://localhost:3033/";
var parsed = "";
export class ClaimList extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    this.Claimlist();
  }
  Claimlist() {
    alert("called");
    $.ajax({
      url: URL + "/ClaimList",
      type: "GET",
      dataType: "json",

      ContentType: "application/json",
      success: function(parsed) {
        parsed = JSON.stringify(parsed);
        console.log(parsed);
        for (var x in parsed) {
          result.push(parsed[x]);
        }

        result = $.parseJSON(parsed);
        data = JSON.stringify(data);
        this.setState(result);
        console.log("hello ramesh");
      }.bind(this),
      error: function(jqXHR) {
        console.log(jqXHR);
      }.bind(this)
    });
  }

  renderProducts() {
    return this.state.result.map(product => {
      return (
        <tr>
          <td>{product.ID}</td>
          <td>{product.ExpenseName}</td>
          <td>{product.Amount}</td>
        </tr>
      );
    });
  }
  render() {
    return (
      <div>
        <table>
          <tbody>
            {this.state.result.map(function(item, key) {
              return (
                <tr key={key.id}>
                  <td>{item.ID}</td>
                  <td>{item.ExpenseName}</td>
                  <td>{item.Amount}</td>
                  <td>{item.Description}</td>
                </tr>
              );
            })}
          </tbody>
        </table>

        <Header />
        <div className={displayContainer}>
          <p className={pageHeading}>Claims</p>

          <hr className={hrStyle} />
          <span className={floatRight1}>
            <form class="form-row" method="GET">
              <input type="search" placeholder="Search" />
              <div
                class="dropdown"
                style={{ position: "relative", left: "-1vw" }}
              >
                <button
                  class="btn  btn-outline-light"
                  type="button"
                  id={btnstyle}
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  <Icon icon={filter} />
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item">Employee ID</a>
                  <a class="dropdown-item">Expense Title</a>
                  <a class="dropdown-item">Date</a>
                  <a class="dropdown-item">Amount</a>
                </div>
              </div>
            </form>
          </span>
          <table class="table table-bordered table-striped table-responsive-md">
            <thead>
              <tr className={orange}>
                <th>Employee ID</th>
                <th>Employee Name</th>
                <th>Expense Title</th>
                <th>Description</th>
                <th>Amount</th>
                <th>Date</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {/* {this.MyTableGrid()} */}

              {this.renderProducts()}
            </tbody>
          </table>
          <div
            className={bankdiv}
            style={{ marginTop: "7vw", marginLeft: "-7.7vw" }}
          >
            <Link to="/AddClaims">
              <button className="btn btn-outline-warning">Add New Claim</button>
            </Link>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}

我无法从json中获取数据并将其映射到datagrid中。我正在使用reactjs和json从backend(go).localhost:3033中获取值，这是我的go服务器，而mysql是我的数据库。我遇到

错误

未捕获的TypeError：无法读取未定义的属性“ map”

Answer 1

只需在构造函数中为result设置默认值，该值目前在您的类的第一个呈现器中是未定义的：

constructor() {
    super();
    this.state = {
      data: [],
      result: []
    };
  }

Answer 2

尽管如@Jitendra所建议，您可以使用JSX语法

render() {
  return {this.state.result && <Fragment> ... </Fragment>}
}

Answer 3

您需要在渲染内部检查this.state.result是否为空，然后再映射它。

render(){
if (!this.state.result)
   return 
else 
   {do other stuffs}

使用JSON数据反应数据表

3 个答案: