React未捕獲的參考錯誤

我使用的是redux wizard forms，我有一個名爲HEADER的組件，它根據狀態的頁碼改變文本。我可以改變頭在每個頁面的title屬性，但我想改變字幕屬性，所以我可以做這樣的事情：React未捕獲的參考錯誤

subtitle={this.state.subtitle }

我想我可以打電話給一個叫updateComponents（功能），做一個switch語句看什麼字幕應該更新，但下面的代碼給了我這樣的：

ReferenceError: updateComponents is not defined.

我不知道我做錯了，或者如果這是更新狀態的最好方法。

import React, { Component, PropTypes } from 'react' 
import Step1Page from './step1Page' 
import Step2Page from './step2Page' 
import Step3Page from './step3Page' 
import Header from '../Template/header'; 

class NewSign extends Component { 
    constructor(props) { 
    super(props) 

    this.nextPage = this.nextPage.bind(this) 
    this.previousPage = this.previousPage.bind(this) 
    this.updateComponents = this.updateComponents.bind(this) 
    this.state = { 
     page: 1, 
     subtitle:"Basic Info" 
    } 
    } 

    updateComponents(){ 
    console.log(this.state.page); 
    } 


    nextPage() { 
    this.setState({ page: this.state.page + 1 }) 
    updateComponents(); 
    } 

    previousPage() { 
    this.setState({ page: this.state.page - 1 }) 
    updateComponents(); 
    } 


    render() { 
    const { onSubmit } = this.props 
    const { page } = this.state 
    return (
     <div className="container"> 
      <Header 
      title={"Step " + this.state.page } 
      subtitle="Basic Info" /> 

      {page === 1 && <Step1Page onSubmit={this.nextPage}/>} 
      {page === 2 && <Step2Page previousPage={this.previousPage} onSubmit={this.nextPage}/>} 
      {page === 3 && <Step3Page previousPage={this.previousPage} onSubmit={this.nextPage}/>} 
     </div> 

    ) 
    } 
} 

NewCampaign.propTypes = { 
    onSubmit: PropTypes.func.isRequired 
} 

export default NewSign

來源

2016-06-15 lost9123193

嘗試並將previousPage（）和nextPage（）中的updateComponents（）更改爲this.updateComponents（）。我認爲它應該工作 –

謝謝，這工作！ – lost9123193

編輯您的代碼。您必須使用this聲明調用函數。

import React, { Component, PropTypes } from 'react' 
import Step1Page from './step1Page' 
import Step2Page from './step2Page' 
import Step3Page from './step3Page' 
import Header from '../Template/header'; 

class NewSign extends Component { 
    constructor(props) { 
    super(props) 

    this.nextPage = this.nextPage.bind(this) 
    this.previousPage = this.previousPage.bind(this) 
    this.updateComponents = this.updateComponents.bind(this) 
    this.state = { 
     page: 1, 
     subtitle:"Basic Info" 
    } 
    } 

    updateComponents(){ 
    console.log(this.state.page); 
    } 


    nextPage() { 
    this.setState({ page: this.state.page + 1 }) 
    this.updateComponents(); 
    } 

    previousPage() { 
    this.setState({ page: this.state.page - 1 }) 
    this.updateComponents(); 
    } 


    render() { 
    const { onSubmit } = this.props 
    const { page } = this.state 
    return (
     <div className="container"> 
      <Header 
      title={"Step " + this.state.page } 
      subtitle="Basic Info" /> 

      {page === 1 && <Step1Page onSubmit={this.nextPage}/>} 
      {page === 2 && <Step2Page previousPage={this.previousPage} onSubmit={this.nextPage}/>} 
      {page === 3 && <Step3Page previousPage={this.previousPage} onSubmit={this.nextPage}/>} 
     </div> 

    ) 
    } 
} 

NewCampaign.propTypes = { 
    onSubmit: PropTypes.func.isRequired 
} 

export default NewSign

來源

2016-06-15 06:15:36

React未捕獲的參考錯誤

回答

相關問題