在方法中使用状态 - 反应

我有一种方法叫做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

在方法中使用状态 - 反应

回答

相关问题