У меня есть три модуля React: Customers, Products, Locations. Все они устроены одинаково. (Я заставил клиентов работать, а затем скопировал их, изменив имена там, где это необходимо.) Клиенты и продукты работают, как и ожидалось.
Проблема с локациями:
Когда пользователи нажимают на элемент в списке, вместо рендеринга компонента 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.handleChangeEvent = this.handleChangeEvent.bind(this);
this.handleEditFormSubmission =
this.handleEditFormSubmission.bind(this);
}
handleChangeEvent(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.handleChangeEvent}
onEditFormSubmission = {this.handleEditFormSubmission}/>
</div>
);
}
}
Location.propTypes = {
match: PropTypes.object,
locations: PropTypes.object,
locationName: PropTypes.string,
onEditLocation: PropTypes.func
};
export default Location;
Что может вызвать эту ошибку? У кого-нибудь есть исправления? Я не могу найти никаких различий между этими двумя файлами и их аналогами Customer и Product.





В конструкторе вы должны поместить константу, как вы это сделали в const location = props.locations[props.match.params.locationId]; в Location.jsx файле.
Если вы хотите установить «местоположение» в конструкторе, оно должно выглядеть так: this.location =....
Я нашел это. Очевидно, «Местоположение» — зарезервированное слово. Я изменил его на «Locution», и ошибка исправлена.