警告:使用Reactjs无法访问代码 [英] Warning: Unreachable code , using Reactjs

问题描述

我正在使用ReactJs.我有两个组件，PrescriptionIndex和PrescriptionNew，它们彼此集成.

I am using ReactJs. I have two Components,PrescriptionIndex and PrescriptionNew, integrating one with another.

这是我的第一个组件'PrescriptionNew'

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;

这是我的另一个组件"PrescriptionIndex"

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;

在运行时，"PrescriptionNew"组件不可见.在检查控制台时，警告表示为无法访问的代码".我已经通过其他解决方案，但是我无法研究出了什么问题在我的代码中.

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.

推荐答案

原因很简单，您有一个if-else，并且您要从两者中返回，因此代码的最后一部分无法访问

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

您可能想要这个

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;

这篇关于警告:使用Reactjs无法访问代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！