React报错：Uncaught TypeError: Cannot read property 'someFn' of undefined 求助

这个报错Uncaught TypeError: Cannot read property 'someFn' of undefined的核心原因很明确——你在函数组件里错误地使用了this.props！因为函数组件没有类组件那样的实例this，直接访问this会得到undefined，自然读不到props里的someFn。

下面是一步步的修复方案：

1. 修复子组件Modal.js（你的NumberList组件）的回调调用 #

你的子组件是函数组件，props是作为参数直接传入的，所以不需要加this，直接用props.someFn即可。同时我们可以优化图标数据的处理，让点击逻辑更清晰：

import React from 'react';
import PropTypes from 'prop-types';

// 建议把组件名改成Modal，和文件名保持一致
const Modal = (props) => {
  // 把原始字符串数组转换成更易处理的对象数组（拆分图标名称和编码）
  const iconList = ['3d_rotation e84d','ac_unit eb3b',/* 剩下的图标字符串 */].map(item => {
    const [iconName, iconCode] = item.split(' ');
    return { name: iconName, code: iconCode };
  });

  // 点击图标时触发父组件传递的回调
  const handleIconClick = (selectedCode) => {
    // 先判断回调是否存在，避免额外报错
    if (typeof props.someFn === 'function') {
      props.someFn(selectedCode);
    }
  };

  return (
    <div className="icon-modal">
      {iconList.map((icon, index) => (
        <i
          key={index}
          className="material-icons"
          onClick={() => handleIconClick(icon.code)}
          title={icon.name}
        >
          {icon.name}
        </i>
      ))}
    </div>
  );
};

// 添加props类型检查，确保父组件传递正确的回调函数
Modal.propTypes = {
  someFn: PropTypes.func.isRequired,
};

export default Modal;

2. 确保父组件App.js正确传递回调函数 #

在App组件中，你需要正确传递someFn作为props，并且确保回调函数的this绑定正确（推荐用类属性箭头函数，自动绑定上下文）：

import React, { Component } from 'react';
import Modal from './Modal';

class App extends Component {
  // 初始化状态
  state = {
    letter: ''
  };

  // 用箭头函数定义回调，自动绑定this到App组件实例
  someFn = (selectedIconCode) => {
    this.setState({
      letter: selectedIconCode
    });
  };

  render() {
    return (
      <div className="app-container">
        <h2>Selected Icon Code: {this.state.letter}</h2>
        {/* 关键：正确传递someFn给Modal组件 */}
        <Modal someFn={this.someFn} />
      </div>
    );
  }
}

export default App;

额外注意事项 #

• 如果你的子组件原本是类组件（后来改成函数组件但没改this.props），那这个错误也会出现，函数组件永远不要用this.props。
• 确保图标字符串的分割逻辑正确（每个字符串是图标名 编码的格式），如果有格式不一致的项，需要调整处理逻辑。
• 给每个图标元素加上唯一的key属性，避免React的列表渲染警告。

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