Reactjs 常量组件无法读取未定义的属性，即使它是道具？

我有父母吗？类，该类承载随机问题和不同类型的用户输入（取决于问题的类型）

3个可单击的按钮，可在单击时更改颜色

输入框

类父级扩展组件{
状态={
按钮颜色：[“白色”、“白色”、“白色”]，
问题类型：0，
平均值：0，
编号：[]，
答复:",，
编号:0，
肖万：错，
电流：“，
等
}
//这一部分主要处理3个按钮的点击
单击回答（用户回答）{
//0是（>）//1是（=）1是（当调用
clickedAnswer={this.clickedAnswer}
时，
this
引用在方法中为空。将其替换为
clickedAnswer={this.clickedAnswer.bind（this）}
以绑定到当前对象，使其能够访问状态

您可以在此处阅读有关
bind
方法的信息：
当您调用
clickedAnswer={this.clickedAnswer}
时，
this
引用在该方法中为空。将其替换为
clickedAnswer={this.clickedAnswer.bind（this）}
以绑定到当前对象，使其能够访问该状态

您可以在此处阅读
bind
方法：

class Parent extends Component {
   state = {
   buttonColors: ["white", "white", "white"],
   questionType: 0,
   avg: 0,
   numbers: [],
   answer: "",
   number: 0,
   showAns: false,
   current: "",
   etc....
   }

   // This part basically handles clicking of 3 buttons
   clickedAnswer(userAnswer) {
     // 0 is (>)   //   1 is (=)        1 is (<)
     let colors = this.state.buttonColors;
     let guess = this.state.current;
     if (!guess.includes(1)) {
     //Hasn't Guessed Yet -Action- Select Clicked button
     //Change color of the Guessed button
     colors[userAnswer] = "#d0f0c0";
     guess[userAnswer] = 1;
     } else {
     //Clicked Previous Answer -Action- Unselect Clicked button
     colors = ["white", "white", "white"]; //Reset Colors
     colors[userAnswer] = "#d0f0c0";
     guess = [0, 0, 0]; // Reset Guess
     guess[userAnswer] = 1;
    }

    this.setState({
    current: guess,
    buttonColors: colors,
    });
  }
   
   render() {
      return (
         <RenderInput
                questionType={this.state.questionType}
                answer={this.state.answer}
                buttonColors={this.state.buttonColors}
                clickedAnswer={this.clickedAnswer}
                handleChange={this.handleChange}
                current={this.state.current}
                showAns={this.state.showAns}
                />
      )
   }

const RenderInput = (props) => {
    switch (props.questionType){
        case 0: case 1: case 2: case 3:
            return (
                <Row style={{ paddingBottom: "50px", paddingTop: "50px" }}>
                  <Col style={{height: 100, textAlign: "right"}}>
                    <button
                        id="btn1"
                        onClick={() => props.clickedAnswer(0)}
                        style={{
                        width: "200px",
                        height: "80px",
                        backgroundColor:
                            props.showAns && props.answer[0] === 1
                            ? "red"
                            : props.buttonColors[0],
                        }}
                    >
                        <span
                        style={{ fontFamily: "courier", fontSize: "35px" }}
                        >
                            {"Higher"}
                        </span>
                    </button>
                  </Col>

                  <Col style={{ height: 100, textAlign: "center" }}>
                    <button
                    id="btn2"
                    onClick={() => props.clickedAnswer(1)}
                    style={{
                        width: "250px",
                        height: "80px",
                        backgroundColor:
                        props.showAns && props.answer[1] === 1
                            ? "red"
                            : props.buttonColors[1],
                    }}
                    >
                    <span
                        style={{ fontFamily: "courier", fontSize: "35px" }}
                    >
                        {"Unchanged"}
                    </span>
                    </button>
                  </Col>

                  <Col style={{height: 100, textAlign: "left"}}>
                    <button
                        id="btn3"
                        onClick={() => props.clickedAnswer(2)}
                        style={{
                          width: "200px",
                          height: "80px",
                          backgroundColor:
                            props.showAns && props.answer[2] === 1
                              ? "red"
                              : props.buttonColors[2],
                        }}
                    >
                        <span
                          style={{ fontFamily: "courier", fontSize: "35px" }}
                        >
                          {"Lower"}
                        </span>
                    </button>
                  </Col>
                </Row>
            )
        case 4: case 5:
            return (
                <p
                style={{
                  fontSize: 25,
                  textAlign: "center",
                  fontFamily: "courier",
                  fontWeight: "bold",
                  paddingTop: "10px",
                }}
                >
                    <input
                        type="text"
                        value={props.current}
                        onChange={props.handleChange}
                        id="input1"
                        autoComplete="off"
                        maxLength="8"
                        style={{
                        color: !props.showAns ? "black" : "red",
                        fontSize: 55,
                        fontFamily: "courier",
                        fontWeight: "bold",
                        width: "280px",
                        height: "85px",
                        textAlign: "center",
                        }}
                    />
                </p>
            )
    }
}