#reactjs #react-router
#reactjs #реагировать-маршрутизатор
Вопрос:
У меня есть три модуля 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;
Что могло бы вызвать эту ошибку? Есть ли у кого-нибудь какие-либо исправления? Я не могу найти никаких различий между этими двумя файлами и их частями счетчика клиентов и продуктов.
Ответ №1:
Я нашел это. По-видимому, «Местоположение» — это зарезервированное слово. Я изменил его на «Locution», и ошибка исправлена.
Ответ №2:
В конструкторе вы должны поместить константу, как вы это делали в const location = props.locations[props.match.params.locationId];
в Location.jsx
файле.
Если вы хотите установить «местоположение» в конструкторе, оно должно выглядеть как this.location =....