React点击父组件PlantContainer的h2触发子组件ShowMetric刷新方法

方案1：通过Props传递刷新标记（最符合React设计理念，推荐） #

核心思路是父组件维护一个刷新触发状态，点击h2时更新该状态，子组件监听该状态变化执行刷新方法。

修改父组件PlantContainer #

import React from "react";
import ClipLoader from "react-spinners/ClipLoader";
import Box from '@material-ui/core/Box';
import ShowMetric from '../showMetric';


export default class PlantContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      refreshTrigger: 0 // 新增刷新触发标记
    };
    this.handleTitleClick = this.handleTitleClick.bind(this);
  }

  // 点击标题时更新触发标记
  handleTitleClick() {
    this.setState(prev => ({
      refreshTrigger: prev.refreshTrigger + 1
    }))
  }

  render() {    
    return (
      <Box>
        <h2 onClick={this.handleTitleClick}>{this.props.plantName}</h2>
        {/* 给所有子组件传递刷新标记 */}
        <ShowMetric 
          setting={this.props.plantName + ".moisture"} 
          unit="%"
          refreshTrigger={this.state.refreshTrigger}
        >Moisture:</ShowMetric>
        <ShowMetric 
          setting={this.props.plantName + ".conductivity"} 
          unit="%"
          refreshTrigger={this.state.refreshTrigger}
        >Fertility:</ShowMetric>
      </Box>
    );
  }
}

修改子组件ShowMetric，新增componentDidUpdate生命周期监听刷新标记变化 #

// 其余代码不变，新增以下生命周期方法
componentDidUpdate(prevProps) {
  // 只有刷新标记变化时才触发数据加载，避免无限更新
  if (prevProps.refreshTrigger !== this.props.refreshTrigger) {
    this.getData();
  }
}

方案2：通过Ref直接调用子组件方法 #

如果不想修改子组件逻辑，可以用ref获取子组件实例直接调用方法，适合子组件数量少的场景：

// PlantContainer修改如下
export default class PlantContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
    };
    this.handleTitleClick = this.handleTitleClick.bind(this);
    // 创建子组件ref
    this.moistureRef = React.createRef();
    this.fertilityRef = React.createRef();
  }

  handleTitleClick() {
    // 直接调用子组件的getData方法
    this.moistureRef.current?.getData();
    this.fertilityRef.current?.getData();
  }

  render() {    
    return (
      <Box>
        <h2 onClick={this.handleTitleClick}>{this.props.plantName}</h2>
        <ShowMetric 
          ref={this.moistureRef}
          setting={this.props.plantName + ".moisture"} 
          unit="%"
        >Moisture:</ShowMetric>
        <ShowMetric 
          ref={this.fertilityRef}
          setting={this.props.plantName + ".conductivity"} 
          unit="%"
        >Fertility:</ShowMetric>
      </Box>
    );
  }
}

• 请求错误处理缺失：当前fetch没有加catch回调，请求失败时isLoading会一直保持true，导致组件永久显示加载状态，建议在fetch链末尾添加catch块，捕获错误时重置isLoading，必要时展示错误提示。
• 无效请求头：Access-Control-Allow-Origin、Access-Control-Allow-Headers属于服务端响应头，前端请求头添加这些字段完全无效，反而可能触发额外的跨域预检，建议直接删除。
• 重复请求优化：当前每个ShowMetric组件都会单独发起请求，同一个PlantContainer下的两个组件完全可以复用同一次请求结果，建议将数据请求逻辑提升到PlantContainer，一次请求拿到所有指标后再分发到子组件，减少接口调用次数。
• this指向优化：fetch的第一个then回调可以换成箭头函数，避免普通函数可能产生的this指向问题。
• 后续可以考虑将类组件重构为函数组件配合Hooks实现，代码会更简洁易维护。

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