React问题：向组件内部函数传递props失败

根据你描述的现象——组件内直接打印type props正常，但内部handler函数里type变成undefined，常见原因及对应解决方法如下：

1. 类组件中函数未绑定上下文 #

如果你的Button是类组件，且handler用普通函数定义，会因this指向丢失导致无法访问this.props.type：

// 错误示例
class Button extends React.Component {
  handleClick() {
    console.log(this.props.type); // undefined
  }
  render() {
    console.log(this.props.type); // 正常输出
    return <button onClick={this.handleClick}>点击</button>;
  }
}

解决方法：

• 在构造函数中绑定this：

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

• 用箭头函数定义handler：

handleClick = () => {
  console.log(this.props.type); // 正常输出
}

• 在onClick中用箭头函数调用：

<button onClick={() => this.handleClick()}>点击</button>

2. 闭包捕获旧值（函数组件场景） #

如果是函数组件，若handler依赖type但未正确触发更新，可能因闭包捕获了初始渲染时的undefined值（比如type初始状态未设置）：

// 错误示例：type初始为undefined，handler捕获旧值
const Button = ({ type, onClick }) => {
  console.log(type); // 后续更新后能正常输出
  // 组件初始化时创建的handler，捕获了初始的undefined type
  const handleClick = useCallback(() => {
    console.log(type); // undefined
    onClick(type);
  }, []); // 未将type加入依赖数组

  return <button onClick={handleClick}>点击</button>;
}

解决方法：
将type加入useCallback（或useEffect）的依赖数组，确保handler能捕获最新的type值：

const handleClick = useCallback(() => {
  console.log(type);
  onClick(type);
}, [type, onClick]);

3. 事件传递时参数错误 #

若在调用handler时未正确传递type，或误将事件对象当作type传入：

// 错误示例：onClick直接绑定handler，默认传事件对象
const Button = ({ type, onClick }) => {
  const handleClick = (param) => {
    console.log(param); // 实际是事件对象，不是type
  };
  return <button onClick={handleClick}>点击</button>;
}

解决方法：
明确传递type参数：

<button onClick={() => handleClick(type)}>点击</button>

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