Reactjs 使用ES7进行React组件状态重构

有人能帮我以ES7格式重构这段代码吗？我已经按照ES7语法设置了它，但是我没有定义“this.makeNewQuestion”

 import React, { Component } from 'react';

    class Game  extends Component{
     constructor(props) {
        super(props);
        const valuesArray = this.makeNewQuestion();
        this.state = {
          value1: valuesArray[0],
          value2: valuesArray[1],
          value3: valuesArray[2],
          proposedAnswer: valuesArray[3],
        };
      }

      makeNewQuestion = () => {
        const value1 = Math.floor(Math.random() * 100);
        const value2 = Math.floor(Math.random() * 100);
        const value3 = Math.floor(Math.random() * 100);
        const proposedAnswer = Math.floor(Math.random() * 3) + (value1 + value2 + value3);
        return [value1, value2, value3, proposedAnswer];
      };

      someOtherNonFatArrowMethod(){

      }

      render(){
      return <h2 />
     }
    }

import React，{Component}来自'React'；
类游戏扩展组件{
建造师（道具）{
超级（道具）；
const valuesArray=this.makeNewQuestion（）；
此.state={
值1:值数组[0]，
value2:valuesArray[1]，
value3:valuesArray[2]，
建议答案：valuesArray[3]，
};
}
makeNewQuestion=（）=>{
常量值1=数学地板（数学随机（）*100）；
常量值2=数学地板（数学随机（）*100）；
常量值3=数学地板（数学随机（）*100）；
const proposedAnswer=Math.floor（Math.random（）*3）+（value1+value2+value3）；
返回[value1、value2、value3、proposedAnswer]；
};
其他一些非数据错误方法（）{
}
render（）{
返回
}
}

我的ES7格式是这样的。在我看来这是正确的，但我明白了。makeNewQuestion未定义。那对我来说毫无意义。有人能帮我找出我在这里遗漏了什么吗

class Game extends Component{
  state = {
    value1: this.generateQuestions()[0],
    value2: this.generateQuestions()[1],
    value3: this.generateQuestions()[2],
    proposedAnswer: this.generateQuestions()[3]
  };

  generateQuestions = () => {
    const value1 = Math.floor(Math.random() * 100);
    const value2 = Math.floor(Math.random() * 100);
    const value3 = Math.floor(Math.random() * 100);
    const proposedAnswer = Math.floor(Math.random() * 3) + (value1 + value2 + value3);
    return [value1, value2, value3, proposedAnswer];
  };

someNonFatArrowFunc(){}
render(){
 return <h2/>
}
}

类游戏扩展组件{
状态={
值1:此.generateQuestions（）[0]，
值2:this.generateQuestions（）[1]，
值3:this.generateQuestions（）[2]，
建议答案：this.generateQuestions（）[3]
};
generateQuestions=（）=>{
常量值1=数学地板（数学随机（）*100）；
常量值2=数学地板（数学随机（）*100）；
常量值3=数学地板（数学随机（）*100）；
const proposedAnswer=Math.floor（Math.random（）*3）+（value1+value2+value3）；
返回[value1、value2、value3、proposedAnswer]；
};
someNonFatArrowFunc（）{}
render（）{
返回
}
}

---

另外，如何避免在该州多次运行makeNewQuestion？我还可以在类中的其他位置捕获makeNewFunction（）的结果？

您可以将

状态指定给并在类中执行必要的逻辑


const{
组成部分
}=反应
类游戏扩展组件{
状态=（（）=>{
const random=（to，from=0）=>Math.floor（Math.random（）*（to-from））；
const makeNewQuestion=（）=>{
常数值1=随机（100）；
常数值2=随机（100）；
常数值3=随机（100）；
const proposedAnswer=随机（3）+（值1+值2+值3）；
返回[value1、value2、value3、proposedAnswer]；
};
常量[value1，value2，value3，proposedAnswer]=makeNewQuestion（）；
//如果您想在以后使用这些函数（即事件处理），您必须绑定它们。
this.makeNewQuestion=makeNewQuestion；
这个。随机=随机；
返回{
价值1，
价值2，
价值3，
提议的答案
}
})();
其他一些非数据错误方法（）{
}
render（）{
返回测试
}
}
ReactDOM.render（，
document.getElementById（'root'））
);

我尝试不使用ES6构造函数，而是希望跳过它并使用ES7字段初始值设定项语法，以简化我的CodeUpdate答案。大多数ES7属性初始值设定项示例假定您将对某些值进行硬编码，然后在某些生命周期方法中对其进行更新。解决方法是
IIFE
，内置lambda函数it@JózefPodlecki在React组件中创建一些as-arrow方法和一些as-regular函数是否有任何好处，特别是如果常规函数仅用于组件内部的辅助方法，而不是用作事件处理程序，我会将这些函数保存在单独的模块/文件中。尤其是那些计算、获取数据的