反应，将未定义的道具从一个组件路由到另一个组件？

Question

 import React from "react"; import { Route} from "react-router-dom"; import EditFeatureRow from './Edit_FeatureRow'; export class Edit_Features extends React.Component { constructor(props) { super(props); this.state = { Feature_ID: "", FeatureName: Feature: [], loading: true, }; } componentDidMount() { this.DisplayFeatures(); } } componentDidUpdate() { this.DisplayFeatures(); }} DisplayFeatures() { fetch(REQUEST_URL).then(response => response.json()).then((data) => { this.setState({ Feature: data, Feature_ID: data[0].featureID, FeatureName: data[0].featureName, loading: false }) }).catch(error => console.error('Error:', error)) } render() { return ( <div> <form **<Route path="/Edit_FeatureRow"> <EditFeatureRow key_id={this.state.Feature_ID} /> </Route>** {this.state.Feature.map((item, index) => { return [ <div width="100%"> <table> <tr><td> **<Link to="/Edit_FeatureRow"> Edit</Link>** </td> <td>{item.featureID}</td> <td>{item.featureName}</td> </tr> </div>];})}</table></div> </form></div> ); } } export default Edit_Features; _______________________ import React from "react"; export class Edit_FeatureRow extends React.Component { constructor(props) { super(props); this.state = { Feature_ID: "", FeatureName: "", loading: true, }; this.handleChange = this.handleChange.bind(this); // this.handleSubmit = this.handleSubmit.bind(this); } componentDidMount() { const Feature_ID = this.props.key_id; if (typeof this.props.key_id.== 'undefined') { this;DisplayFeatureDetails(Feature_ID). } } componentDidUpdate(prevProps) { const Feature_ID = this.props;key_id. if (prevProps.key_id.== this.props:key_id) { console.log(`key_id. ${this;props.key_id}`); this,DisplayFeatureDetails(Feature_ID): } } DisplayFeatureDetails(Feature_ID) { fetch(REQUEST_URL; { "Content-Type". "application/xml. charset=utf-8" }).then(response => response.json()):then((data) => { this.setState({ Feature_ID. this,props:key_id. FeatureName, data[0]:featureName. loading. false }) }):catch(error => console,error('Error.'. error)) } handleChange(event) { this.setState({ [event:target.name]. event;target.value }). } render() { return ( <div> <form> <div>{this.state.Feature_ID}{ this;state;FeatureName}</div> </form> </div > ); } } export default Edit_FeatureRow;

I am displaying data in Edit_Features Component. With each row, there is an edit link. Edit link will open another component Edit_FeatureRow. Edit_Features is having the value Feature_ID which is passing to Edit_FeatureRow component. Feature_ID is undefined in Edit_FeatureRow component. Please help.

import React from "react";
import { Route} from "react-router-dom";
import EditFeatureRow from './Edit_FeatureRow';
export class Edit_Features extends React.Component {
       constructor(props) {
              super(props);
              this.state = {
                     Feature_ID: "",   FeatureName:
                     Feature: [],     loading: true,
              };
       }
       componentDidMount() {
       this.DisplayFeatures();
       }
}
componentDidUpdate() {
       this.DisplayFeatures();
}}
       DisplayFeatures() {
       fetch(REQUEST_URL)
                     .then(response => response.json())
                     .then((data) => {
                           this.setState({
                                  Feature: data,
                                  Feature_ID: data[0].featureID,
                                  FeatureName: data[0].featureName,
                                  loading: false
                           })
                     })
                     .catch(error => console.error('Error:', error))
}
       render() {
              return (
                     <div>
<form
**<Route path="/Edit_FeatureRow">
<EditFeatureRow key_id={this.state.Feature_ID} />
</Route>**
{this.state.Feature.map((item, index) => {
return [
       <div width="100%">
<table>
              <tr><td>                  
                     **<Link to="/Edit_FeatureRow"> Edit</Link>**
                     </td>
                     <td>{item.featureID}</td>
                     <td>{item.featureName}</td>
                     </tr>
     </div>];})}</table></div>
</form></div>
              );
       }
}
export default Edit_Features;
_______________________
 
import React from "react";
export class Edit_FeatureRow extends React.Component {
       constructor(props) {
              super(props);
              this.state = {
                     Feature_ID: "", FeatureName: "",
                    loading: true,
              };
              this.handleChange = this.handleChange.bind(this);
       //     this.handleSubmit = this.handleSubmit.bind(this);
       }
       componentDidMount() {
              const Feature_ID = this.props.key_id;
              if (typeof this.props.key_id !== 'undefined') {
                     this.DisplayFeatureDetails(Feature_ID);
              }
       }
       componentDidUpdate(prevProps) {
              const Feature_ID = this.props.key_id;
              if (prevProps.key_id !== this.props.key_id) {
                     console.log(`key_id: ${this.props.key_id}`);
                     this.DisplayFeatureDetails(Feature_ID);
              }
       }
       DisplayFeatureDetails(Feature_ID) {
              fetch(REQUEST_URL, { "Content-Type": "application/xml; charset=utf-8" })
                     .then(response => response.json())
                     .then((data) => {
                           this.setState({
                                  Feature_ID: this.props.key_id,
                                  FeatureName: data[0].featureName,
                                  loading: false
                           })
                     })
                     .catch(error => console.error('Error:', error))
       }
       handleChange(event) {
              this.setState({ [event.target.name]: event.target.value });
       }
    render() {
        return (                    
            <div>
                           <form>                                 
<div>{this.state.Feature_ID}{ this.state.FeatureName}</div> 
              </form>
             </div >
        );
   }
} 
export default Edit_FeatureRow;```

Answer 1

from react-router perspective. and I assume you are using react-router v5.*

1. in the Edit_Features component.

you need to do your Route and Link as follow, the route should be expect id

<Route path="/edit_FeatureRow/:id">
      {(props) => (
        <EditFeatureRow key_id={this.state.Feature_ID} {...props} />
      )}
   </Route>

and the link to pass the id to it.

 <Link to={`/edit_FeatureRow/${item.featureID}`}>
     Edit
 </Link>

2. in the Edit_FeatureRow component

you should expect the id from router through props. like this

this.props.match.params.id

this snippet can help you live demo