Блог

Главная - Вопросы по программированию - Я проверил закрывающие теги и скобки.Это говорит мне, что возврата нет в функции, я не знаю, как это исправить

Я проверил закрывающие теги и скобки.Это говорит мне, что возврата нет в функции, я не знаю, как это исправить

#reactjs #jsx

Вопрос:

введите описание изображения здесь

 import React, { Component } from "react";
import { Card, CardImg, CardImgOverlay, CardTitle } from "reactstrap";
import CampsiteInfo from "./CampsiteinfoComponent";

class Directory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCampsite: null,
    };
  }
  onCampsiteSelect(campsite) {
    this.setState({ selectedCampsite: campsite });
  }

  render() {
    const directory = this.props.campsites.map((campsite) => {
      return (
        <div key={campsite.id} className="col-md-5 m-1">
          <Card onClick={() => this.onCampsiteSelect(campsite)}>
            <CardImg width="100%" src={campsite.image} alt={campsite.name} />
            <CardImgOverlay>
              <CardTitle>{campsite.name}</CardTitle>
            </CardImgOverlay>
          </Card>
        </div>
      );
    });

    return (
      <div className="container">
        <div className="row">
          {directory}
          <CampsiteInfo campsite={this.state.selectedCampsite} />
        </div>
      </div>
    );
  }
}
return <div className="row">{this.renderCampsite(this.props.campsite)}</div>;

export default Directory;

Комментарии:

1. return Во второй строке снизу: в какой функции она находится?

2. Я полагаю, что это должно быть в рендере.

Ответ №1:

удалите это. Это вне компонента.

return <div className="row">{this.renderCampsite(this.props.campsite)}</div>;

Редактировать:

Из вашего комментария следует, что если вам нужно добавить эту часть в компоненты, я бы добавил ее в объект каталога:

 const directory = this.props.campsites.map((campsite) => {
  return (
    <div key={campsite.id} className="col-md-5 m-1">
      <Card onClick={() => this.onCampsiteSelect(campsite)}>
        <CardImg width="100%" src={campsite.image} alt={campsite.name} />
        <CardImgOverlay>
          <CardTitle>{campsite.name}</CardTitle>
          <div className="row">{this.renderCampsite(this.props.campsite)}</div>
        </CardImgOverlay>
      </Card>
    </div>
  );
});

Но, судя по ошибке, функция this.renderCampsite , похоже, не существует в компоненте. Может быть, сначала нужно добавить это.

Комментарии:

1. Я попробовал это сделать и получил еще одну ошибку. говоря (это.renderCampsite не является функцией)

2. как бы я поместил этот оператор return в рендеринг, где он может работать, вот что я хочу знать…

3. Отредактировал мой ответ.

Метки: , , ,