ReactJS中如何让OnClick函数记住传递的值？

你的核心问题是在CompareValeur函数内用var重新声明了全局变量MemOne和MemTwo，这会在函数作用域内创建新的局部变量，完全覆盖全局变量的引用，导致全局变量根本没被更新。另外还有几个小问题需要一并修正：

具体问题拆解 #

• 局部变量覆盖全局变量：函数里写var MemOne = value时，var会声明一个函数级局部变量，和全局的MemOne不是同一个。每次调用函数都会创建新的局部变量，执行完就销毁，全局变量自然不会被修改。
• 函数名拼写不一致：Start函数的onClick里混用了CompareValue和CompareValeur（最后一个字母拼写差异），会导致部分点击触发时找不到函数报错。
• return语句无效：return MemTwo, MemOne是JS逗号运算符，实际只返回最后一个值MemOne，而你需要的是修改全局变量，不需要return这些值。
• 比较逻辑时机错误：当前每次调用函数都会执行匹配检查，第一次点击时MemTwo还是初始值，会出现误判，应该只在第二次点击（设置完MemTwo后）才检查。

修复后的代码 #

全局变量声明（保持不变） #

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

修复后的CompareValeur函数 #

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")
    } else { 
        // 同样去掉var
        MemTwo = value
        console.log("MemTwo defined")
        
        // 仅在第二次点击时执行匹配检查
        if (MemOne === MemTwo) { 
            console.log("Success !");
        }
    }
    // 统一在最后递增pair，逻辑更清晰
    pair++; 
}

修复后的Start函数（修正函数名拼写） #

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={() => CompareValeur(randomvalue[1])} />
                </div>
                <div style={{ marginRight: "5px" }}>
                    <img src={img}  onClick={() => CompareValeur(randomvalue[2])} />
                </div>
                <div style={{ marginRight: "5px" }}>
                    <img src={img}  onClick={() => CompareValeur(randomvalue[3])} />
                </div>
                <div>
                    <img src={img}  onClick={() => CompareValeur(randomvalue[4])} />
                </div>
            </div>
        </center>
    );
    // 此处需补充将Cartes渲染到DOM的逻辑，原代码遗漏
}

额外优化建议 #

• 尽量避免全局变量，在React（从JSX判断你在用React）中推荐用useState钩子管理状态，更符合组件化规范，也不会有作用域问题。
• sort(() => Math.random() - 0.5)的随机排序有偏倚，推荐使用更公平的Fisher-Yates洗牌算法：

  function shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
  }
  // 使用方式：
  const randomvalue = shuffleArray([...listes_value, ...listes_value]);
  

内容的提问来源于stack exchange，提问作者furie_noire