React函数组件中两个按钮点击均输出2的原因排查求助

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是全局变量引发的闭包陷阱，具体来说：

你在BtnClick.js里把funcc和btnType声明成了组件外部的全局变量：

var funcc;
var btnType;

当React渲染两个BtnClick组件时，第一个组件会把这两个变量设为props.func和"1"，但紧接着第二个组件会覆盖这两个变量的值为props.func和"2"。这就导致不管你点击哪个按钮，触发cliquage函数时，调用的都是最后被覆盖的btnType（也就是"2"），自然控制台只会输出"2"了。

修复方案（两种可选） #

方案1：直接用内联箭头函数传递参数 #

修改BtnClick.js，去掉全局变量，直接在onClick事件里调用props.func并传入当前组件的type：

import React from 'react';
import './BtnClick.css';

function BtnClick (props){
 return (
  <div className="BtnClick" onClick={() => props.func(props.type)}>
   hi {props.type}
  </div>
 )
}

export default BtnClick;

方案2：组件内部定义点击函数（利用闭包保存props） #

如果不想用内联函数，也可以把点击函数定义在组件内部，这样每个组件实例都会拥有自己的cliquage函数，通过闭包拿到当前的props：

import React from 'react';
import './BtnClick.css';

function BtnClick (props){
  // 每个组件实例都有自己的cliquage函数，能获取当前的props
  const cliquage = () => {
    props.func(props.type);
  };

 return (
  <div className="BtnClick" onClick={cliquage}>
   hi {props.type}
  </div>
 )
}

export default BtnClick;

补充：实现完整需求（更新Quote组件文本） #

如果你还需要让Quote组件根据点击显示"left"或"right"，记得在App.js的updateQuote函数里调用setQuoteText：

function updateQuote(type){
 console.log(type);
 // 根据type设置对应的文本
 setQuoteText(type === "1" ? "left" : "right");
}

这样点击左侧按钮（type="1"）时，Quote就会显示"left"，点击右侧按钮（type="2"）时显示"right"啦。

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