React函数组件传prop报错：prop非函数，需改用类组件？

一、修复Search组件的'prop is not a function'错误 #

这个错误大概率是父组件传递回调函数时出了问题，常见场景：

• 传递时写错了prop名称：比如父组件传的是onSearch，子组件却用handleSearch调用
• 传递时直接执行了函数：比如写了onSearch={handleSearch()}而不是onSearch={handleSearch}（多的括号会直接执行函数，传递的是返回值而非函数本身）
• 父组件根本没传这个回调prop，子组件却直接尝试调用它

修复步骤：

1. 父组件向Search组件传递回调时，确保传的是函数引用：

// 父组件代码示例
<Search onSearch={handleSearch} />

2. 子组件中确认prop名称和父组件一致，调用前做个判断避免报错：

// Search组件代码示例
const Search = ({ onSearch }) => {
  const [searchQuery, setSearchQuery] = useState('');

  const handleSearchClick = () => {
    // 先判断onSearch是否为函数再调用
    typeof onSearch === 'function' && onSearch(searchQuery);
  };

  return (
    <div className="search-bar">
      <input 
        type="text" 
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
      />
      <button onClick={handleSearchClick}>🔍</button>
    </div>
  );
};

二、不用转类组件，函数组件和super()完全无关 #

完全没必要切换到类组件：

• 函数组件通过React Hooks（useState、useEffect等）就能实现类组件的所有功能，写法更简洁
• super()是类组件特有的：类组件继承React.Component时，constructor里必须调用super(props)来初始化父类构造函数，同时让this.props在constructor中可用。函数组件没有this，也不需要constructor，所以和super()没有任何关系

三、拆分Results组件的实现方案 #

把结果展示逻辑抽成独立组件，只负责接收数据并渲染，保持单一职责：

1. 创建Results组件：

// Results.jsx
const Results = ({ movies, isLoading, error }) => {
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>出错了：{error.message}</div>;
  if (!movies.length) return <div>暂无搜索结果</div>;

  return (
    <div className="results-grid">
      {movies.map(movie => (
        <div key={movie.id} className="movie-card">
          <img 
            src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} 
            alt={movie.title}
          />
          <h3>{movie.title}</h3>
          <p>评分：{movie.vote_average}</p>
        </div>
      ))}
    </div>
  );
};

export default Results;

2. 父组件中引入并传递所需props：

// 父组件代码示例
import Results from './Results';

function App() {
  const [movies, setMovies] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleSearch = async (query) => {
    setIsLoading(true);
    setError(null);
    try {
      // 调用API获取电影数据的逻辑
      const res = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=YOUR_KEY&query=${query}`);
      const data = await res.json();
      setMovies(data.results);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="app">
      <Search onSearch={handleSearch} />
      <Results movies={movies} isLoading={isLoading} error={error} />
    </div>
  );
}

四、super()相关知识点与学习建议 #

• 核心作用：在React类组件的constructor中，super(props)会调用React.Component的构造函数，初始化组件的基础属性，同时确保this.props在constructor内部可以访问。如果类组件没有写constructor，React会自动隐式调用super(props)，不需要手动写。
• 趋势说明：React官方现在更推荐函数组件+Hooks，类组件的使用场景越来越少，所以不需要花太多精力在super()上，了解基本概念即可。
• 学习方向：可以看React官方文档中类组件的章节，重点理解构造函数的作用；或者找基础React教程中类组件的部分，搞清楚super()的必要性和使用场景。

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