Advertencia: Código inalcanzable, utilizando Reactjs

Estoy usando ReactJs. Tengo dos componentes, PrescriptionIndex y PrescriptionNew, integrando uno con otro.

Este es mi primer componente ‘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( 
) } } export default PrescriptionNew;

Este es mi otro componente “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(

Fetching an Api results in error

) } if (this.props.has_loading){ return(

Loading...

) } if (this.props.prescriptions.prescriptions !== undefined) { return this.props.prescriptions.prescriptions.map(function(data){ return (
prescription
); }); } else { return null; } return(
//this is where I need my another component
) } } export default PrescriptionIndex;

En ejecución, el componente “PrescriptionNew” no es visible. Al examinar la consola, la advertencia aparece como “Código inalcanzable”. He pasado por otras soluciones , pero no puedo estudiar qué está mal en mi código.

La razón es bastante directa, tiene un if-else y está regresando de ambos, por lo que la última parte de su código es inalcanzable.

usted podría querer esto

 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(

Fetching an Api results in error

) } if (this.props.has_loading){ return(

Loading...

) } return(
{this.props.prescriptions.prescriptions && this.props.prescriptions.prescriptions.map(function(data){ return (
prescription
); }); }
) } } export default PrescriptionIndex;

Tu código es actualmente

 if (X) return A else return B return C 

Por supuesto que C es inalcanzable aquí. Creo que pretendía descartar el caso else ( B ) donde actualmente está devolviendo null , y devolver C lugar de él.

 if (this.props.prescriptions.prescriptions !== undefined) { return this.props.prescriptions.prescriptions.map(function(data){ return ( 
prescription
); }); } else { // return null; <== remove this return (
) }