Question

我敢打赌这与异步性有关。

基本上，我正在检查是否已存在字符串（问题的答案），如果存在，则页面应仅显示一条消息，否则应将新问题添加到数组中。

因此，为了重构代码，我创建了一个名为isDuplicateAnswer的函数（是的，它已绑定到组件）。这是它的代码：

 isDuplicateAnswer() {
    if (this.state.answersToCurrentQuestion.length > 0) {
      this.state.answersToCurrentQuestion.map(answer => {
        if (this.state.answerTextTyped === answer.text) {
          console.log("true"); // executed twice but then adds it to the array (not supposed to)
          return true;
        }
      });
    }
  }

基于此检查，代码将执行以下操作：

if (
      event.target.id === "submitAnswer" &&
      this.state.answerTextTyped !== null &&
      this.isDuplicateAnswer()
    ) {
      console.log("Something is wrong"); // This line is never executed (no log, no message)
      return this.props.handleMessage(
        "There is already another answer with this text. Please add a different one."
      );
    } else if (
      event.target.id === "submitAnswer" &&
      this.state.answerTextTyped !== null &&
      !this.isDuplicateAnswer()
    ) {
      console.log("Everything OK"); // not displayed but rest of the code goes through (answer added)
      this.setState({ answerText: this.state.answerTextTyped }, () => {
        (() => {
          let answersToCurrentQuestion = [
            ...this.state.answersToCurrentQuestion,
          ];
          answersToCurrentQuestion.push({
            text: this.state.answerText,
            isCorrect: this.state.isCorrectAnswer,
          });
          this.setState({ answersToCurrentQuestion });
          if (this.state.isCorrectAnswer === true) {
            this.incrementCorrectAnswers();
          }
        })();
        (() => {
          this.props.handleMessage("");
          this.setState({
            isValid: true,
            isCorrectAnswer: false,
            answerTextTyped: null,
          });
          this.refreshAnswerTypedForm();
          this.getAnswerTypedForm();
        })();
      });
    }

我的问题是，如果isDuplicateAnswer为false，正如我的日志中所说的“一切都很好”，但是当它返回true时，就会创建答案，导致应有的错误即使isDuplicateAnswer的日志显示两次，HTML密钥也不是唯一的。

鉴于后卫中的其他两项检查工作正常，我在这里做错了什么？

编辑

这是单击“添加答案”之前的状态，该ID为submitAnswer

Answer 1

您的代码中有很多错误。我将列出对我来说最显而易见的：

1）您的isDuplicateAnswer()方法将始终返回undefined，在if条件下，该方法将始终得出false。这就是为什么Something is wrong永远不会执行的原因-它永远不会转到该块。

2）此链接到上面的1)。基本上map不会返回boolean，此外，您还必须返回性能不好的函数的结果。要解决此问题，请使用类似some的方法，该方法的确返回布尔值：

isDuplicateAnswer() {
       return this.state.answersToCurrentQuestion.some(answer => this.state.answerTextTyped === answer.text);
        // If we find that answer already exists, some will return true, otherwise false.
  }

3）在第二个块中，不要两次检查event.target.id === "submitAnswer" && this.state.answerTextTyped !== null。只要做：

if (event.target.id === "submitAnswer" && this.state.answerTextTyped !== null) {
    if (isDuplicateAnswer()) {
        console.log("Something is wrong");
        return this.props.handleMessage("There is already another answer with this text. Please add a different one.");
        // No setState call to change anything.
    } else {
        // Call setState and add your answer.
    }

反应-检查函数是否返回true，但始终为false运行代码

1 个答案: