REACT:untured TypeError:ReactCompositeComponent.js的非法构造函数

Question

我有三个反应模块：客户，产品，位置。所有这些都以相同的方式结构。（我让客户工作，然后在需要时复制它更改名称。）客户和产品按预期工作。

位置的问题：

当用户单击列表中的项目时，我会得到此错误，而不是呈现位置组件时：

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;

这是应该渲染的位置.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;

什么会导致此错误？有人有修复吗？我找不到这两个文件与他们的客户和产品计数器零件之间的任何区别。

Answer 1

我找到了它。显然，"位置"是一个保留的词。我将其更改为" linection"，并修复了错误。

Answer 2

在构造函数上，您应该像在Location.jsx文件上的const location = props.locations[props.match.params.locationId];一样放置一个常数。

如果要在构造函数上设置"位置"，则应以this.location =....