Блог

У меня есть три модуля React: клиенты, продукты, местоположения. Все они структурированы одинаково. (Я заставил клиентов работать, затем скопировал его, изменив имена там, где это было необходимо.) Клиенты и продукты работают так, как ожидалось.

Проблема с местоположениями:

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

 Uncaught TypeError: Illegal constructor
at ReactCompositeComponent.js:303
at measureLifeCyclePerf (ReactCompositeComponent.js:73)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (ReactCompositeComponent.js:302)
at ReactCompositeComponentWrapper._constructComponent (ReactCompositeComponent.js:277)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:185)
at Object.mountComponent (ReactReconciler.js:43)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:762)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:721)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:642)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:544)
  

Список генерируется LocationList.jsx:

 import React from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { v4 } from "uuid";

function LocationList({locations, onDeletingLocation}) {

function deleteLocation(locationId) {
 event.preventDefault();

 onDeletingLocation(locationId);
}

return (
 <div className="container">
  {Object.keys(locations).map((locationId) => {
    let location = locations[locationId];
    return <div key={v4()}>
      <Link
        to={`/admin/locations/${location.id}`}
      >
        <p>{location.locationName}</p>
      </Link>
      <button onClick={() => {deleteLocation(location.id);}}>Delete</button>
    </div>;
  }
  )}
  </div>
 );
}

LocationList.propTypes = {
  locations: PropTypes.object,
  onDeletingLocation: PropTypes.func
};

export default LocationList;
  

Это Location.jsx, который должен быть отображен:

 import React from "react";
import PropTypes from "prop-types";
import EditLocationForm from "./../Locations/EditLocationForm";

class Location extends React.Component {
  constructor(props) {
  super(props);
  const location = props.locations[props.match.params.locationId];

this.state = {
  locationName: location.locationName,
  locationAddress: location.locationAddress,
  locationPostalCode: location.locationPostalCode,
  locationDescription: location.locationDescription,
  id: location.id
};

  this.handleChange = this.handleChange.bind(this);
  this.handleEditFormSubmission = 
  this.handleEditFormSubmission.bind(this);
 }

handleChange(event) {
  const target = event.target;
  const value = target.value;
  const name = target.name;

  this.setState({
    [name]: value
   });
  }

handleEditFormSubmission(event) {
event.preventDefault();

this.props.onEditLocation(
  {
    locationName: this.state.locationName,
    locationAddress: this.state.locationAddress,
    locationPostalCode: this.state.locationPostalCode,
    locationDescription: this.state.locationDescription,
    id: this.state.id
  });
}

  render() {
   const location = this.state;
    return (
    <div>
     <div className="container">
      <h3>{this.state.locationName}</h3>
      <p>{this.state.locationAddress}</p>
      <p>{this.state.locationPostalCode}</p>
      <p>{this.state.locationDescription}</p>
      <p>{this.state.id}</p>
    </div>

    <EditLocationForm
      location={location}
      onEditLocation={this.props.onEditLocation}
      onChange={this.handleChange}
      onEditFormSubmission={this.handleEditFormSubmission}/>
   </div>
   );
  }
}

Location.propTypes = {
 match: PropTypes.object,
 locations: PropTypes.object,
 locationName: PropTypes.string,
 onEditLocation: PropTypes.func
 };

export default Location;
  

Что могло бы вызвать эту ошибку? Есть ли у кого-нибудь какие-либо исправления? Я не могу найти никаких различий между этими двумя файлами и их частями счетчика клиентов и продуктов.

Я нашел это. По-видимому, «Местоположение» — это зарезервированное слово. Я изменил его на «Locution», и ошибка исправлена.

В конструкторе вы должны поместить константу, как вы это делали в const location = props.locations[props.match.params.locationId]; в Location.jsx файле.

Если вы хотите установить «местоположение» в конструкторе, оно должно выглядеть как this.location =....