React类组件onClick传参调用fetchStock不生效问题求解

onClick属性需要接收函数引用作为事件回调，你当前写的onClick={this.fetchStock("AMZN")}属于函数立即执行：组件渲染阶段就会直接调用fetchStock发起请求，等用户实际点击按钮时，这个位置拿到的是fetchStock的返回值（你的方法没有写return，实际是undefined），没有可执行的回调，自然不会触发预期逻辑。

最简实现：箭头函数包裹调用 #

直接用箭头函数包裹你的方法调用，把箭头函数作为回调传给onClick，只有点击触发时才会执行内部的fetchStock：

{/* 替换原有的button标签 */}
<button onClick={() => this.fetchStock("AMZN")}>加载AMZN数据</button>

这个改法不需要调整其他逻辑，改完就能生效。

规范优化（推荐） #

你当前代码里用const pointerToThis = this绕开了类方法this指向丢失的问题，写法不够简洁，可以一起优化：

1. 首先在构造函数中绑定fetchStock的this上下文：

constructor(props) {
  super(props);
  this.state = {
    stockChartXValues: [],
    stockChartYValues: [],
  }
  // 新增这行绑定
  this.fetchStock = this.fetchStock.bind(this);
}

2. 重写fetchStock方法，去掉冗余的pointerToThis变量，把Promise回调改成箭头函数避免this指向问题：

fetchStock(s) {
  const StockSymbol = s;
  const API_KEY = 'AUVHHUK64JIJCXOP';
  const API_Call = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${StockSymbol}&outputsize=compact&apikey=${API_KEY}`;
  const stockChartXValuesFunction = [];
  const stockChartYValuesFunction = [];

  fetch(API_Call)
    .then(response => response.json())
    .then(data => {
      for (const key in data['Time Series (Daily)']) {
        stockChartXValuesFunction.push(key)
        stockChartYValuesFunction.push(data['Time Series (Daily)'][key]['4. close']);
      }
      this.setState({
        stockChartXValues: stockChartXValuesFunction,
        stockChartYValues: stockChartYValuesFunction
      });
    })
}

3. 如果要加多个股票切换按钮，直接按相同写法传参即可：

<button onClick={() => this.fetchStock("AAPL")}>苹果</button>
<button onClick={() => this.fetchStock("AMZN")}>亚马逊</button>
<button onClick={() => this.fetchStock("TSLA")}>特斯拉</button>

• 你用的Alpha Vantage免费接口有每分钟5次的调用限制，频繁点击会触发限流返回错误，建议加个loading状态在请求过程中禁用按钮，避免重复请求
• 如果后续要做股票代码输入查询，逻辑也一样：输入框拿到值之后，在事件回调里调用this.fetchStock(输入的股票代码)即可

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