JavaScript Dokry
  1. JavaScript Dokry
  3. Advertencia: Código inalcanzable, utilizando Reactjs

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 ( 
  
 ) }
Intereting Posts
CKEditor: restablece la position de intercalación después de llamar al editor # setData¿Cómo hacer una list y vista de cuadrícula para cambiar el control del interruptor que se carga en parciales en AngularJS?¿Cuál es el tipo JSDoc para document.getElementById ('myID') y un elemento jQuery?¿Diferencia de funciones de JavaScript vs jQuery?¿Cómo seleccionar varias casillas de verificación en HTML usando Meteor?Javascript InvalidCharacterError al modificar un nombre css con un espaciojQuery equivalente a Prototype collect y map functions?Desarrollo de aplicaciones Android: java vs. jquery mobile