Question

我有一个名为 devCreateSteps 的方法，我想在其中使用状态，但它会抛出一个错误说;

未捕获的TypeError：无法读取未定义的属性'isTemplateUsed'

这是我的代码片段;

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 />),
  }];

问题是我无法使用

isTemplateUsed = {this.state.isTemplateUsed}

在 devCreateSteps

中

使用state将其作为道具发送的正确方法是什么？

Answer 1

不要直接在课堂上将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。确保您在stage-2中添加了preset to babel webpack配置，因为property initializers不属于ES6。

Answer 2

未捕获的TypeError：无法读取未定义的属性'isTemplateUsed'

因为您在初始化之前使用了名为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。

在方法中使用state - React

2 个答案: