javascript - TypeError : Cannot read property 'state' of undefined. 但是状态可以成功console.logged(REACT)

Question

我有一个组件，我正在尝试为其创建状态。此状态可以成功记录/警报，但在我的 return 语句中使用时它不起作用。

这是组件。不起作用的状态是viewMoreToken。这是在 map 函数中使用的。

class DisplayWSAAnsweredQuestions extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      viewMoreToken: false
    };
  }
  render() {
    alert(this.state.viewMoreToken);
    return (
      <>
        {this.props.answeredQuestions &&
          this.props.answeredQuestions.map(function(question, index) {
            if (!this.state.viewMoreToken) {
              if (
                question.QuestionResponse === "Y" ||
                question.QuestionResponse === "N"
              ) {
                return (
                  <>
                    <div
                      style={{
                        backgroundColor: "#E6E6E6",
                        padding: "1px"
                      }}
                    >
                      <ul>
                        {" "}
                        <b> Q :</b>
                        <div style={{ float: "right" }}>✔️</div>
                        {question.QuestionWhenAnswered}
                      </ul>
                    </div>
                  </>
                );
              } else if (question.QuestionResponse === "P") {
                return (
                  <>
                    <div
                      style={{
                        backgroundColor: "#BDBDBD",
                        padding: "1px"
                      }}
                    >
                      <ul>
                        <b> Q :</b>
                        {question.QuestionWhenAnswered}{" "}
                        <div style={{ float: "right" }}>❌</div>
                        {/* <br />
                          <b> S :</b>
                          {question.SuggestedSoloution} */}
                      </ul>
                    </div>
                  </>
                );
              }
            } else {
              return <>Nice </>;
            }
          })}
      </>
    );
  }
}

这是错误消息。

TypeError: Cannot read property 'state' of undefined

为什么当使用警报时，它显示它被设置为 false 很好，但一旦在 .map 函数的 if 语句中使用它，它就会说它是未定义的。

非常感谢任何建议。

Answer 1

问题是您的 map 函数未绑定(bind)到外部 this 范围。

使用箭头功能

this.props.answeredQuestions.map( (question, index) => {
//rest of the code
});