在方法中使用狀態 - 反應

我有一種方法叫做devCreateSteps我想使用狀態，但它會拋出一個錯誤說;在方法中使用狀態 - 反應

Uncaught TypeError: Cannot read property 'isTemplateUsed' of undefined

這是我的代碼片段;

constructor() { 
    super(); 
    this.state = { 
     modalVisible: false, 
     tableLoading: false, 
     modalHeader: "", 
     isTemplateUsed: false 
    }; 
    } 

    devCreateSteps = [{ 
    title: 'Info', 
    content: (<StepOne isTemplateUsed={this.state.isTemplateUsed} />), 
    }, { 
    title: 'Device', 
    content: (<StepTwo />), 
    }, { 
    title: 'Location', 
    content: (<StepThree />), 
    }, 
    { 
    title: 'Properties', 
    content: (<StepFour />), 
    }, 
    { 
    title: 'Controls', 
    content: (<StepFive />), 
    }, 
    { 
    title: 'Summary', 
    content: (<StepFinal />), 
    }];

問題是我不能在devCreateSteps

什麼是使用狀態，其發送的道具以正確的方式使用

isTemplateUsed={this.state.isTemplateUsed}

呢？

來源

2017-09-13 Burak ULU

你有沒有反應控制檯。如果是，請告訴我你在'state'中對'StepOne'組件有什麼作用 – Gardezi

它在轉到StepOne組件之前實際上會引發錯誤。我有一個控制檯來查看StepOne中的狀態，但它永遠不會去那裏。 –

但這是我在StepOne的狀態; 構造函數（道具）{ super（道具）; this.state = { isTemplateUsed：this.props.isTemplateUsed }; } –

而不是直接在類中定義devCreateSteps作爲類屬性，而是在componentWillMount函數中執行。

class App extends React.Component { 

constructor() { 
    super(); 
    this.state = { 
     modalVisible: false, 
     tableLoading: false, 
     modalHeader: "", 
     isTemplateUsed: false 
    }; 
    } 

    componentWillMount() { 
    this.devCreateSteps = [{ 
    title: 'Info', 
    content: (<StepOne isTemplateUsed={this.state.isTemplateUsed} />), 
    }, { 
    title: 'Device', 
    content: (<StepTwo />), 
    }, { 
    title: 'Location', 
    content: (<StepThree />), 
    }, 
    { 
    title: 'Properties', 
    content: (<StepFour />), 
    }, 
    { 
    title: 'Controls', 
    content: (<StepFive />), 
    }, 
    { 
    title: 'Summary', 
    content: (<StepFinal />), 
    }]; 
    } 

}

也將狀態定義爲屬性初始化器。

class App extends React.Component { 


    state = { 
      modalVisible: false, 
      tableLoading: false, 
      modalHeader: "", 
      isTemplateUsed: false 
     }; 

    devCreateSteps = [{ 
     title: 'Info', 
     content: (<StepOne isTemplateUsed={this.state.isTemplateUsed} />), 
     }, { 
     title: 'Device', 
     content: (<StepTwo />), 
     }, { 
     title: 'Location', 
     content: (<StepThree />), 
     }, 
     { 
     title: 'Properties', 
     content: (<StepFour />), 
     }, 
     { 
     title: 'Controls', 
     content: (<StepFive />), 
     }, 
     { 
     title: 'Summary', 
     content: (<StepFinal />), 
     }]; 


    }

P.S. make sure you have stage-2 added as a preset to babel in you webpack config, since property initializers are not part of ES6.

來源

2017-09-13 07:18:50

這兩者有什麼區別？你能解釋一下嗎？ –

Uncaught TypeError: Cannot read property 'isTemplateUsed' of undefined

由於您使用的初始化之前名爲open狀態變量，您可以通過兩種方式要麼

避免這個錯誤嘗試用空數組初始化變量，然後分配使用狀態wihtin構造函數的值。

devCreateSteps: []; 

constructor(props, state) { 
super(props, state); 
this.state = { 
    open: this.props.open 
} 
console.log(this.props, this.state); 
this.devCreateSteps = [{ 
    title: 'Info', 
    content: (<p isTemplateUsed={this.state.open} />) 
}] 
}

，或者您可以使用componentWillMount如上答覆建議。

來源

2017-09-13 08:27:20

在方法中使用狀態 - 反應

回答

相關問題