Question

我正在尝试创建一个测验系统，选择不同的选项将导致不同的输出，但是，输出始终是相同的。有什么问题吗？

用户在按钮1和2之间进行选择，然后在按钮3和4之间进行选择。他做出了两个选择，它们为这种情况设置了特定的状态。例如。选择1和3会得出['a'，'c']。按下输出按钮时，它将检查所有选项结果并在console.log中记录特定方案的输出。

import React from "react";
import ReactDOM from "react-dom";
import stylesheet from "./stylesheet.css";

class App extends React.Component {
constructor(props) {
super(props);
this.state = { myArray: [] };
}

firstHandler = () => {
  this.setState(previousState => ({
    myArray: [...previousState.myArray, "a"]
  }));
};
 secondHandler = () => {
  this.setState(previousState => ({
    myArray: [...previousState.myArray, "b"]
  }));
 };
 thirdHandler = () => {
   this.setState(previousState => ({
   myArray: [...previousState.myArray, "c"]
   }));
  };
  fourthHandler = () => {
  this.setState(previousState => ({
    myArray: [...previousState.myArray, "d"]
  }));
  };

  output = () => {
   const ar1 = [];
    if (this.state.myArray.values === ar1.values) {
   return console.log("Death");
   } else if (this.state.myArray.values === ["a", "b"].values) {
   return console.log("Life");
   } else if (this.state.myArray.values === ["a", "d"].values) {
   return console.log("Wealth");
    } else {
  return console.log("Dispair");
     }
  };
   render() {
    return (
      <div>
       <div className="row-one">
      <button className="option-one" onClick={this.firstHandler}>
        button 1
      </button>
      <button className="option-two" onClick={this.secondHandler}>
        button 2
      </button>
     </div>
     <div className="row-two">
       <button className="option-three" onClick={this.thirdHandler}>
         button 1
       </button>
       <button className="option-four" onClick={this.fourthHandler}>
         button 2
        </button>
       </div>
        <div>{this.state.myArray}</div>
      <button onClick={this.output}>...</button>
     </div>
     );
       }
    }

  ReactDOM.render(<App />, document.getElementById("root"));

无论选择哪种选项，都继续输出“死亡”

Answer 1

您遇到的问题是，您认为array的.values函数返回了数组值的表示形式，您可以将其与其他值进行比较，但事实并非如此。 values（）返回数组值的迭代器，如您所见here。

您有几种比较数组值的选项。我建议一种简单的方法来执行排序，然后生成数组值的字符串表示形式。将您的方法输出替换为以下内容：

  output = () => {
    const ar1 = [];
    let newArra = this.state.myArray.slice().sort().toString();

    if (newArra === ar1.toString()) {
      return console.log("Death");
    } else if (newArra === ["a", "b"].toString()) {
      return console.log("Life");
    } else if (newArra === ["a", "d"].toString()) {
      return console.log("Wealth");
    } else {
      return console.log("Dispair");
    }
  };

Answer 2

死亡的原因...是第一个if语句始终为true，因为this.state.myArray.values and ar1.values未定义，因此根据该表达式this.state.myArray.values === ar1.values得出true，请参见以下帮助：


output = () => {
    // const ar1 = [];
    const myArray = this.state.myArray;

    // check the lenth if 0 then 'death'
    if (!myArray.length) {
      return console.log("Death");
    } else {
      // if you want the array to have only two values uncomment below code
      // myArray.length = 2;
      if (myArray.includes("a") && myArray.includes("b")) {
        return console.log("Life");
      } else if (myArray.includes("a") && myArray.includes("d")) {
        return console.log("Wealth");
      } else {
        return console.log("Dispair");
      }
    }
  };

Answer 3

您的if条件是错误的，主要是因为您尝试访问数组值的方式是错误的。数组比较：

if (this.state.myArray.values === ar1.values) {
      return console.log("Death");
}

将始终为真。这是因为this.state.myArray.values是Array类函数，并且您正在将其与Array中的ar1类函数进行比较。显然，它们是相同的，这就是为什么在这种情况下您总是会收到真实的原因。您在这里使用的意思是：

if (this.state.myArray.values() === ar1.values()) {
      return console.log("Death");
}

，但这也不起作用，因为Array.values()返回一个具有数组内容的新数组运算符，而标识运算符===将返回false，因为它们是不同的数组，即使内容是相同。（即使您比较ar1.values() === ar1.values()也会返回false）。如果您想知道，相等运算符==也不起作用。

通常，用javascript比较数组内容并非易事。我建议您使用另一种方法，例如使用不同的FLAGS或object。但是，如果您仍然希望继续使用数组比较，请查看How to compare arrays in JavaScript?

如何根据状态值创建不同的输出

3 个答案: