Javascript 删除console.log会引发错误_Javascript_Reactjs

Javascript 删除console.log会引发错误

javascript reactjs

Javascript 删除console.log会引发错误,javascript,reactjs,Javascript,Reactjs,我有一个使用reactjs和ReactMDL构建的应用程序。有一个选项卡显示信息、剧集和演员。点击插曲时，标题中的Jane应更改为其他文本，因此55集以及选项卡下方的其他内容。我编写的代码可以满足我的要求，但我认为这不是正确的方法，而且存在一个bug。我知道是我的错，但不知道该怎么解决 class MovieDetailView extends Component{ constructor(props){ super(props); this.state = {

我有一个使用reactjs和ReactMDL构建的应用程序。有一个选项卡显示信息、剧集和演员。点击插曲时，标题中的Jane应更改为其他文本，因此55集以及选项卡下方的其他内容。我编写的代码可以满足我的要求，但我认为这不是正确的方法，而且存在一个bug。我知道是我的错，但不知道该怎么解决

class MovieDetailView extends Component{
  constructor(props){
    super(props);
    this.state = {
      movie:[ ],
      activeTab:1
    }
  }

  render(){
    console.log("Tab ID: ", this.state.activeTab);
    let movie = this.state.movie;
    const mainCastJoin = _.join(movie.mainCast, ', ');
    if(!this.state.movie){
      return(
        <p>Loading</p>
      );
    }

    else{
      return(
        <div className="demo-big-content">
          <Layout fixedHeader fixedTabs>
              <Header>
                {this.state.activeTab >= 0 ? <HeaderComponent movie={this.state.movie} activeTab={this.state.activeTab}/> : ' '}
                  <HeaderTabs ripple activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })}>
                      <Tab>SHOW INFO</Tab>
                      <Tab>EPISODES</Tab>
                      <Tab>CAST</Tab>
                  </HeaderTabs>
                    <Link to="/"><i className="material-icons arrow_back">arrow_back</i></Link>
              </Header>
              <Content>
                  <div className="page-content">{this.state.activeTab >=0 ? <MovieInfo movie={this.state.movie} activeTab={this.state.activeTab} /> : ''}</div>
              </Content>
            </Layout>
          </div>
      );
    }
  }
}

export default MovieDetailView;

类MovieDetailView扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电影：[]，
活动选项卡：1
}
}
render（）{
log（“选项卡ID:，this.state.activeTab”）；
让电影=this.state.movie；
const mainCastJoin=uu.join（movie.mainCast，，）；
如果（！this.state.movie）{
返回(
装载
);
}
否则{
返回(
{this.state.activeTab>=0？：''}
this.setState（{activeTab:tabId}）}>
显示信息
插曲
铸造
箭背
{this.state.activeTab>=0？：''}
);
}
}
}
导出默认的MovieDetailView；

HeaderComponent.js

const HeaderComponent = ({activeTab, movie}) => {
  const mainCastJoin = _.join(movie.mainCast, ', ');
  const renderHeader =
    console.log('kk');
    if(activeTab === 0){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;{mainCastJoin}
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      );
    }

    if(activeTab === 1){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;episode
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      )
    }

    if(activeTab === 2){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;main cast
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      )
    }

  return(
    <div>{renderHeader}</div>
  )
}

export default HeaderComponent;

const HeaderComponent=（{activeTab，movie}）=>{
const mainCastJoin=uu.join（movie.mainCast，，）；
常量渲染器=
console.log（'kk'）；
如果（activeTab==0）{
返回(
日期范围{mainCastJoin}
历史55集/4季/2013-
);
}
如果（activeTab==1）{
返回(
date_系列插曲
历史55集/4季/2013-
)
}
如果（activeTab==2）{
返回(
date_系列主演员阵容
历史55集/4季/2013-
)
}
返回(
{renderHeader}
)
}
导出默认HeaderComponent；

这段代码可以工作，但如果我删除了console.log，就会出现错误

Error in ./src/component/HeaderComponent.js
Syntax error: Unexpected token (10:4)

      const renderHeader =
       // console.log('kk');
      if(activeTab === 0){
          ^
         return(
           <div>
             <HeaderRow title={movie.title}>

./src/component/HeaderComponent.js中的

错误
语法错误：意外标记（10:4）
常量渲染器=
//console.log（'kk'）；
如果（activeTab==0）{
^
返回(

如何解决？为什么会导致错误？解决此类问题的有效方法是什么

更新

let renderHeader =  () => ({
   return(
    if(activeTab === 0){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;{mainCastJoin}
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      );
    }

    if(activeTab === 1){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;episode
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      )
    })
}

let renderHeader=（）=>({
返回(
如果（activeTab==0）{
返回(
日期范围{mainCastJoin}
历史55集/4季/2013-
);
}
如果（activeTab==1）{
返回(
date_系列插曲
历史55集/4季/2013-
)
})
}

更正上述代码不会产生任何输出，而是会产生新错误{this.renderHeader（）}

constrenderheader=（）=>({
如果（activeTab==0）{
^
返回(

在赋值运算符（

）后面必须有可以赋值给变量（在这种情况下是常量）的内容

在工作代码中，您正在分配

console.log（）

的返回值

在断开的代码中，您试图将一个

if

语句放在那里。

您没有为renderHeader赋值！

使用未注释的console，因为您在其上分配了

console.log

的结果。

您正在将const renderHeader=设置为console.log（）。这是允许的（它不有用，但允许）

但是，当您删除它时，您正在将“const renderHeader=”设置为if语句。解析器无法解析该语句，您的JavaScript正在中断。

如果您希望一个变量包含if的结果，您必须将其包装到IIFE（立即调用的函数表达式）中：

或者，您可以执行以下操作：

var renderHeader=" null";
if(sth){
renderHeader="sth is true";
}

5专家已经很好地解释了您代码中错误的原因。现在您遇到了另一个问题，您可以通过我的解决方案来克服。但我也是一名学习者。我将分享此解决方案，供自己向这些专家学习。如果我要解决此问题，我的解决方案将是

const ShowInfoHeader = (movie, mainCastJoin) => {
  return(
    <div>
      <HeaderRow title={movie.title}>
        <IconButton name="more_vert" id="demo-menu-lower-left" />
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">date_range</i>&nbsp;{mainCastJoin}
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
      </HeaderRow>
    </div>
  );
}

const EpisodeHeader = (movie) => {
  return(
    <div>
      <HeaderRow title={movie.title}>
        <IconButton name="more_vert" id="demo-menu-lower-left" />
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">date_range</i>&nbsp;episode
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
      </HeaderRow>
    </div>
  );
}


const HeaderComponent = ({activeTab, movie}) => {
  const mainCastJoin = _.join(movie.mainCast, ', ');

  if(activeTab===0){
  return(
    <div>{ShowInfoHeader(movie, mainCastJoin)}</div>
  )
}
if(activeTab===1){
  return(
    <div>{EpisodeHeader(movie)}</div>
  )
}
}

export default HeaderComponent;

const ShowInfoHeader=（电影，mainCastJoin）=>{
返回(
日期范围{mainCastJoin}
历史55集/4季/2013-
);
}
const eposodeheader=（电影）=>{
返回(
date_系列插曲
历史55集/4季/2013-
);
}
const HeaderComponent=（{activeTab，movie}）=>{
const mainCastJoin=uu.join（movie.mainCast，，）；
如果（activeTab==0）{
返回(
{ShowInfoHeader（电影，mainCastJoin）}
)
}
如果（activeTab==1）{
返回(
{插曲头（电影）}
)
}
}
导出默认HeaderComponent；

如果这是处理此类问题的好方法，我将非常感谢专家对这个解决方案的思考。

const renderHeader=到底在那里做什么？如果我纠正了错误，代码看起来是否有效？@Learner:我更像是一个js而不是一个react的家伙。问问更擅长这个的人。昆汀example@Learner-您的更新d问题是一个新问题。它不应该是对现有问题的编辑。很抱歉不知道。但现在问题在@Tushant的帮助下解决了。我现在记住了这一点。也感谢你的帮助。就像Tushant说他需要经验一样

var renderHeader=" null";
if(sth){
renderHeader="sth is true";
}

const ShowInfoHeader = (movie, mainCastJoin) => {
  return(
    <div>
      <HeaderRow title={movie.title}>
        <IconButton name="more_vert" id="demo-menu-lower-left" />
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">date_range</i>&nbsp;{mainCastJoin}
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
      </HeaderRow>
    </div>
  );
}

const EpisodeHeader = (movie) => {
  return(
    <div>
      <HeaderRow title={movie.title}>
        <IconButton name="more_vert" id="demo-menu-lower-left" />
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">date_range</i>&nbsp;episode
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
      </HeaderRow>
    </div>
  );
}


const HeaderComponent = ({activeTab, movie}) => {
  const mainCastJoin = _.join(movie.mainCast, ', ');

  if(activeTab===0){
  return(
    <div>{ShowInfoHeader(movie, mainCastJoin)}</div>
  )
}
if(activeTab===1){
  return(
    <div>{EpisodeHeader(movie)}</div>
  )
}
}

export default HeaderComponent;