Блог

Надеюсь, у вас все хорошо. Я работаю с функциональным компонентом и хочу заполнить его некоторыми базовыми данными из моей базы данных. У меня есть средний уровень, который, как я подтвердил, отправляет данные во внешний интерфейс (ASP.net ). Я могу видеть данные внутри самого функционального компонента в инструментах разработчика, но когда я пытаюсь отобразить данные из реквизитов в компонент, они отображаются как пустые. Как будто в переменных вообще ничего не было.

Как вы можете видеть, данные находятся внутри самого функционального компонента. Код для функционального компонента:

 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);
  

Я не очень продвинутый программист, но это очень простой фрагмент кода. Чего мне не хватает?

Ваш корпоративный реквизит — это массив, поэтому вы должны сопоставить каждый элемент со строкой таблицы.

 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>
  );
};