Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

这个问题是由无法再复制的打字或问题引起的。虽然类似的问题可能包括,但以不大可能帮助未来的读者的方式解决了这一问题。

Closed 29 mins ago.

So, I am trying to make a memory game and I want my function "CompareValue" to remember the last variable I passed I declared in the script at the beginning MemOne and MemTwo so they are global variables. Here is my HTML code :

function Start(){
var Cartes = [];
const listes_value = [1,2,3,4,5,6,7,8];
const randomvalue = [...listes_value, ...listes_value].sort(() => Math.random() - 0.5);

Cartes.push(
    <center key={`row`}> 
        <div style={{ display: "flex", justifyContent: "center", margin: "20px 0" }}>
            <div style={{ marginRight: "5px" }}>
                <img src={img} onClick={() => CompareValue(randomvalue[1])} />
            </div>
            <div style={{ marginRight: "5px" }}>
                <img src={img}  onClick={() => CompareValue(randomvalue[2])} />
            </div>
            <div style={{ marginRight: "5px" }}>
                <img src={img}  onClick={() => CompareValue(randomvalue[3])} />
            </div>
            <div>
                <img src={img}  onClick={() => CompareValeur(randomvalue[4])} />
            </div>
        </div></center>

这里是我的比较。价值职能

function CompareValeur(value){
console.log("value :",value)
console.log("MemOne :",MemOne)
console.log("MemTwo :",MemTwo) 
if (pair % 2 === 0) { 
    var MemOne = value
    console.log("MemOne defined")

    pair++; 
} else { 
    var MemTwo = value
    console.log("MemTwo defined")
    pair++;

}
if (MemOne== MemTwo) { 
    console.log("Success !");
}
return MemTwo, MemOne}

基本上,我想我守则要做的是记住Mem One,然后在另一个照片被点击时将其与MemTwo进行比较。但我的职能似乎在我回来时忘记了我的变数。

    var MemOne = 0; //Global variable
    var MemTwo = 1; //Global variable
    var pair = 0; //Global variable

Here is how I define them at the beginning of my script. Pair is however not lost but I dont understand why

Answer 1

你在可能范围内重新宣布变数。

var Mem One = 价值 =>Mem One = 价值

辞职,不宣布

Answer 2

<代码>的最大特征之一 ReactJS is that it used of state/code>, to Store related information.


因此,当你需要全球变量时,特别是当它可能改变部件的提供时,你可以使用<>>。 hook:

function Start() {
    var Cartes = [];
    const valueArr = [1, 2, 3, 4, 5, 6, 7, 8];
    const randomValueArr = [...valueArr, ...valueArr].sort(() => Math.random() - 0.5);
    
    // declare it with initial value in your case, 
    // then you can use it within the component like global variable.
    // But also allows the component to re-render when it changes,
    // if you assigned it to the component.
    const [memOne, setMemOne] = useState(0);
    const [memTwo, setMemTwo] = useState(1);
    const [pair, setPair] = useState(0);

    const compareValue = (value) => {
    console.log("value :", value)
    console.log("MemOne :", memOne)
    console.log("MemTwo :", memTwo)
    if (pair % 2 === 0) {
      memOne = value; // also implement what @Odri said
      console.log("MemOne defined");
      pair++;
    } else {
      memTwo = value; // also implement what @Odri said
      console.log("MemTwo defined");
      pair++;
    }
    if (memOne == memTwo) {
      console.log("Success !");
    }
    return memTwo, memOne;
  }

  Cartes.push(
    <center key={`row`}>
      <div style={{ display: "flex", justifyContent: "center", margin: "20px 0" }}>
        <div style={{ marginRight: "5px" }}>
          <img src={img} onClick={() => compareValue(randomValueArr[1])} />
        </div>
        <div style={{ marginRight: "5px" }}>
          <img src={img} onClick={() => compareValue(randomvrandomValueArralue[2])} />
        </div>
        <div style={{ marginRight: "5px" }}>
          <img src={img} onClick={() => compareValue(randomValueArr[3])} />
        </div>
        <div>
          <img src={img} onClick={() => compareValue(randomValueArr[4])} />
        </div>
      </div>
    </center>

不过,我也建议你将主要组成部分中的重复部分组成:
const ClickableImage = (props) => {

    // ...put the compareValue function here

    return (
        <div style={{ marginRight: "5px" }}>
            <img src={img}  onClick={() => compareValue(randomvalue[props.value])} />
        </div>
    );
}

Hope the answer helps.

友情链接