Question

我有三个React模块：客户，产品，位置。它们的结构都相同。（我让客户工作，然后将其复制为需要更改的名称。）客户和产品按预期工作。

位置问题：

当用户单击列表中的某个项目时，而不是呈现“位置”组件时，出现此错误：

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;

什么会导致此错误？有没有人修复？我找不到这两个文件及其“客户”和“产品”对应部件之间的任何区别。

Answer 1

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

如果要在构造函数上设置“位置”，则应使用this.location =....

Answer 2

我找到了。显然，“位置”是保留字。我将其更改为“ Locution”，并且该错误已修复。

React：未捕获的TypeError：ReactCompositeComponent.js的非法构造函数

2 个答案: