时间戳

首页 > 解决方案 > React：为什么这些基本数据不会填充到我的功能组件中？

reactjs - React：为什么这些基本数据不会填充到我的功能组件中？

问题描述

希望你们一切都好。我正在使用一个功能组件，我想用我的数据库中的一些基本数据填充它。我有一个中间层，我已确认将数据发送到前端（ASP.net）。我可以在开发人员工具中看到功能组件本身的数据，但是当我尝试将 props 中的数据渲染到组件中时，它显示为空白。好像变量中根本没有任何东西。

https://ibb.co/RDKv48m

如您所见，数据位于功能组件本身内。功能组件的代码是：

import React from "react";
import PropTypes from "prop-types";

const CompaniesList = ({ Companies }) => {
  return (
    <React.Fragment>
      <div className="height-equal equal-height-lg card">
        <div className="card-header">
          <h5>Companies List</h5>
        </div>
        <div className="card-body">
          <div className="user-status height-scroll custom-scrollbar">
            <table className="table table-borderless">
              <thead>
                <tr>
                  <th scope="col" className="pt-0">
                    Logo
                  </th>
                  <th scope="col" className="pt-0">
                    Company Name
                  </th>
                  <th scope="col" className="pt-0">
                    Industry
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <img src={Companies.logo} alt="logo"></img>
                  <td>{Companies.companyName}</td>
                  <td>fdfdf</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

CompaniesList.propTypes = {
  Companies: PropTypes.shape({
    companyName: PropTypes.string,
    id: PropTypes.number,
    industry: PropTypes.string,
    logo: PropTypes.string,
    website: PropTypes.string,
  }),
};

export default CompaniesList;

父组件的代码是：

import React from "react";
import getAll from "../../services/companyService";
import { withRouter } from "react-router-dom";
import PropTypes from "prop-types";
import CompaniesList from "./CompaniesList";
const _logger = logger.extend("Companies");

class Companies extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Companies: {},
    };
  }
  componentDidMount = () => {
    this.getListCompanies();
  };

  getListCompanies = () => {
    getAll().then(this.listOfCompaniesSuccess);
  };

  listOfCompaniesSuccess = (config) => {
    let companyList = config.items;
    this.setState((prevState) => {
      return {
        ...prevState,
        Companies: companyList,
      };
    });
  };

  onCompListError = (errResponse) => {
    _logger(errResponse);
  };

  mapCompanies = (Companies) => (
    <CompaniesList Companies={Companies} key={Companies.id} />
  );

  render() {
    return (
      <React.Fragment>
        <div className="row">
          <div className="col">{this.mapCompanies(this.state.Companies)}</div>
        </div>
        <div className="Row">
          <div className="col">{this.state.Companies.companyName}</div>
        </div>
      </React.Fragment>
    );
  }
}

Companies.propTypes = {
  Companies: PropTypes.shape({
    companyName: PropTypes.string,
    id: PropTypes.number,
    industry: PropTypes.string,
    logo: PropTypes.string,
    website: PropTypes.string,
  }),
};

export default withRouter(Companies);

我不是一个非常高级的编码器，但这是一段非常简单的代码。我错过了什么？

标签： reactjsreact-nativereact-router

解决方案

您的 Companies 道具是一个数组，因此您应该将每个元素映射到表格行。

import React from "react";
import PropTypes from "prop-types";

const CompaniesList = ({ Companies }) => {
  return (
    <React.Fragment>
      <div className="height-equal equal-height-lg card">
        <div className="card-header">
          <h5>Companies List</h5>
        </div>
        <div className="card-body">
          <div className="user-status height-scroll custom-scrollbar">
            <table className="table table-borderless">
              <thead>
                <tr>
                  <th scope="col" className="pt-0">
                    Logo
                  </th>
                  <th scope="col" className="pt-0">
                    Company Name
                  </th>
                  <th scope="col" className="pt-0">
                    Industry
                  </th>
                </tr>
              </thead>
              <tbody>
                {Companies.map((Company) => (
                  <tr>
                    <img src={Company.logo} alt="logo"></img>
                    <td>{Company.companyname}</td>
                    <td>fdfdf</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

推荐阅读