React报错Uncaught TypeError: props.addPost is not a function求助

这个错误的核心是你的MyPosts组件没有接收到正确的addPost函数props，或者根本没传递这个props。以下是具体解决步骤：

1. 检查父组件的props传递逻辑 #

确保在渲染MyPosts的父组件中，你确实传递了addPost属性，并且它是一个函数类型。

比如父组件的正确写法应该类似这样：

import { MyPosts } from './MyPosts';

function ParentComponent() {
  // 定义添加帖子的处理函数
  const handleAddPost = (postContent) => {
    // 这里写实际的添加逻辑，比如更新state中的posts数组
    console.log('要添加的帖子内容:', postContent);
  };

  return (
    <MyPosts 
      posts={/* 你的帖子数据数组，比如[{message: 'xxx', likesCount: 0}] */}
      addPost={handleAddPost} // 必须传递这个函数
    />
  );
}

• 避免错误写法：比如不要把addPost传成字符串（addPost="addPost"）、undefined，或者其他非函数类型。

2. 添加Props类型校验（推荐） #

使用prop-types包给组件添加props类型约束，能提前在控制台看到明确的警告，快速定位问题：

首先安装依赖：

npm install prop-types

然后修改MyPosts组件：

import React from "react";
import PropTypes from 'prop-types';
import classes from "./MyPosts.module.css";
import { Post } from "./Post/Post.jsx";

export const MyPosts = (props) => {
  
  let postsElement = props.posts.map((p) => (
    <Post message={p.message} likesCount={p.likesCount} />
  ));

  let newPostElement = React.createRef();

  let addPost = () => {
    let text = newPostElement.current.value;
    props.addPost(text);
    newPostElement.current.value ='';
  }
  return (
    <div className={classes.postsBlockN}>
      <h3>My Post</h3>
      <div>
        <div>
          <textarea ref={newPostElement}></textarea>
        </div>
        <div>
          <button onClick={addPost}>Add Post</button>
        </div>
      </div>
      <div className={classes.postsSN}></div>
      {postsElement}
    </div>
  );
};

// 添加props类型校验
MyPosts.propTypes = {
  posts: PropTypes.arrayOf(
    PropTypes.shape({
      message: PropTypes.string.isRequired,
      likesCount: PropTypes.number.isRequired
    })
  ).isRequired,
  addPost: PropTypes.func.isRequired // 强制要求addPost是函数
};

3. 可选：防御性编程规避报错 #

如果想临时避免报错，可以在调用前先判断props.addPost是否为函数：

let addPost = () => {
  let text = newPostElement.current.value;
  // 先检查类型，再调用
  if (typeof props.addPost === 'function') {
    props.addPost(text);
  }
  newPostElement.current.value ='';
}

不过这只是临时方案，核心还是要确保父组件正确传递addPost函数。

内容的提问来源于stack exchange，提问作者S. Gorishnoi