在方法中使用状态 - React答案

【问题标题】：Using state in method - React在方法中使用状态 - React
【发布时间】：2017-09-13 07:09:20
【问题描述】：

我有一个名为 devCreateSteps 的方法，我想在其中使用状态，但它会引发错误提示；

未捕获的类型错误：无法读取未定义的属性“isTemplateUsed”

这是我的代码的 sn-p；

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 作为 props 发送的正确方法是什么？

【问题讨论】：

你有反应控制台吗？如果是，请告诉我state for StepOne 组件中有什么
它实际上在转到 StepOne 组件之前抛出了错误。我有一个控制台可以查看 StepOne 中的状态，但它永远不会去那里。
但这是我在 StepOne 中的状态；构造函数（道具）{ 超级（道具）； this.state = { isTemplateUsed: this.props.isTemplateUsed }; }
如果state 也是一个类道具，这将起作用，而不是在构造函数中完成。

标签： reactjs

【解决方案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 />),
  }];
  }

}

也将 state 定义为属性初始化器。

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 的一部分。

【讨论】：

这两者有什么区别？你能解释一下吗？

【解决方案2】：

未捕获的类型错误：无法读取未定义的属性“isTemplateUsed”

由于您在初始化之前使用了名为open的状态变量，因此您可以通过两种方式避免此错误

尝试用空数组初始化变量，然后使用构造函数的状态赋值。

 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。

【讨论】：