React函数无法返回组件：点击按钮添加Post组件失败求助

嘿，我来帮你搞定这个问题！你现在的代码有几个关键问题导致Post组件没法显示出来，咱们一步步理清楚：

问题分析 #

• 直接修改state是无效的：你用this.state.posts.push(newPost)直接修改了state数组，但React不会监测到这种直接修改，也就不会触发组件重新渲染，所以页面不会更新。
• 事件处理函数返回组件没用：handlePost是按钮的点击事件回调，它的返回值不会被React用来渲染内容，渲染逻辑应该放在render方法里。
• 没有在render中渲染posts数组：你的render方法只渲染了按钮，没有把state里的posts数组遍历渲染到页面上。
• （小问题）Post组件里的classNa应该是className，这是React里的标准写法。

修正后的完整代码 #

import React from 'react';

export default class Extra extends React.Component {
  constructor() {
    super();
    this.state = { val: '', posts: [] };
  }

  handlePost = () => {
    // 不要直接修改state，用setState更新，创建新数组
    this.setState(prevState => ({
      posts: [...prevState.posts, { status: "Status", about: "This post is about React" }]
    }));
  }

  render() {
    return(
      <div>
        <button onClick={this.handlePost} className="fixed">Post</button>
        {/* 遍历posts数组，渲染每个Post组件 */}
        {this.state.posts.map((post, index) => (
          <Post 
            key={index} 
            status={post.status} 
            about={post.about} 
          />
        ))}
      </div>
    );
  }
}

const Post = ({ status, about }) => {
  return(
    <div className="post">
      <h3>{status}</h3>
      <p>{about}</p>
    </div>
  );
}

关键要点解释 #

1. 用setState更新状态：React要求我们通过setState方法来修改状态，这里用了函数式更新（prevState => ...），确保我们基于最新的state来更新数组，避免因为异步更新导致的问题。同时用扩展运算符[...prevState.posts, newPostData]创建新数组，而不是修改原数组。
2. 在render中遍历posts：通过this.state.posts.map()把数组里的每个数据项转换成Post组件，注意要给每个组件加唯一的key属性（这里用index作为临时key，实际项目里最好用唯一ID）。
3. 存储数据而非组件：建议在state里存储组件需要的数据（比如status和about的字符串），而不是直接存储<Post />组件，这样更灵活，也符合React的状态管理最佳实践。

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