I am using ReactJs. I have two Components,PrescriptionIndex and PrescriptionNew, integrating one with another.
This is my first component 'PrescriptionNew'
import React, { Component } from 'react'; import FloatingActionButton from 'material-ui/FloatingActionButton'; import ContentAdd from 'material-ui/svg-icons/content/add'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' class PrescriptionNew extends Component { render(){ return( <div> <MuiThemeProvider> <FloatingActionButton mini={true} style={{"color": "pink"}}> <ContentAdd/> </FloatingActionButton> </MuiThemeProvider> </div> ) } } export default PrescriptionNew;
This is my another Component "PrescriptionIndex"
import React , { Component } from 'react'; import { connect } from "react-redux"; import { fetchPrescriptionFromUrl } from '../actions/index.js'; import { Link } from 'react-router'; import PrescriptionNew from './new.jsx'; import '../app.css'; class PrescriptionIndex extends Component { componentDidMount(){ this.props.fetchData(PORT+'/prescriptions'); } render() { if (this.props.has_error){ return(<p> Fetching an Api results in error</p>) } if (this.props.has_loading){ return(<p> Loading...</p>) } if (this.props.prescriptions.prescriptions !== undefined) { return this.props.prescriptions.prescriptions.map(function(data){ return ( <div className="image-prescription" key={data.id}> <Link to={"/update/" + data.id} > <img src={data.image_path.image_path.url} className="prescription-image" alt="prescription" /> </Link> </div> ); }); } else { return null; } return( <div> <PrescriptionNew /> //this is where I need my another component </div> ) } } export default PrescriptionIndex;
On Running, the "PrescriptionNew" component is not visible. On examing the console, warning is stated as " Unreachable code". I have gone through other solutions , but I cannot able to study whats going wrong in my code.
Your code is currently
if (X)
return A
else
return B
return C
Of course C
is unreachable here. I think you meant to drop the else case ( B
) where you currently are returning null
, and return C
instead of it.
if (this.props.prescriptions.prescriptions !== undefined) {
return this.props.prescriptions.prescriptions.map(function(data){
return (
<div className="image-prescription" key={data.id}>
<Link to={"/update/" + data.id} >
<img src={data.image_path.image_path.url}
className="prescription-image"
alt="prescription"
/>
</Link>
</div>
);
});
} else {
// return null; <== remove this
return (
<div>
<PrescriptionNew />
</div>
)
}
The reason is pretty straight forwards, you have an if-else and you are returning from both of them so the last part of your code is unreachable
you might want this
import React , { Component } from 'react';
import { connect } from "react-redux";
import { fetchPrescriptionFromUrl } from '../actions/index.js';
import { Link } from 'react-router';
import PrescriptionNew from './new.jsx';
import '../app.css';
class PrescriptionIndex extends Component {
componentDidMount(){
this.props.fetchData(PORT+'/prescriptions');
}
render() {
if (this.props.has_error){
return(<p> Fetching an Api results in error</p>)
}
if (this.props.has_loading){
return(<p> Loading...</p>)
}
return(
<div>
<PrescriptionNew />
{this.props.prescriptions.prescriptions && this.props.prescriptions.prescriptions.map(function(data){
return (
<div className="image-prescription" key={data.id}>
<Link to={"/update/" + data.id} >
<img src={data.image_path.image_path.url}
className="prescription-image"
alt="prescription"
/>
</Link>
</div>
);
}); }
</div>
)
}
}
export default PrescriptionIndex;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.