警告：无法访问的代码，使用 Reactjs答案

【问题标题】：Warning: Unreachable code , using Reactjs警告：无法访问的代码，使用 Reactjs
【发布时间】：2023-03-13 19:24:01
【问题描述】：

我正在使用 ReactJs。我有两个组件，PrescriptionIndex 和 PrescriptionNew，它们相互集成。

这是我的第一个组件“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”

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”组件不可见。在检查控制台时，警告声明为“无法访问的代码”。我已经通过其他solutions，但我无法研究我的代码中出了什么问题。

【问题讨论】：

嗯，它是无法访问的代码。前面的if/else 语句已经从函数中得到return。
你有 if-else 并且你在他们的身体里返回，之后的任何代码都将无法访问
也许你想else { return <PrescriptionNew />; }
谢谢各位。问题解决了

标签： javascript reactjs material-ui

【解决方案1】：

您的代码目前是

if (X)
  return A
else
  return B
return C

当然C 在这里是无法访问的。我认为您的意思是放弃当前返回 null 的 else case (B)，并返回 C 而不是它。

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>
  )
}

【讨论】：

【解决方案2】：

原因很简单，你有一个 if-else 并且你从他们两个返回，所以你的代码的最后一部分是不可访问的

你可能想要这个

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;

【讨论】：