如何在使用Redux Connect的React组件中更新额外Props？

嘿，我帮你把这个使用Redux Connect的ProjectForm组件代码规整成清晰的Markdown格式啦，还补充了一些关键逻辑示例和说明：

这是一个Class类型的React表单组件，通过Redux的connect方法与Redux状态管理库关联，主要用于处理项目相关的表单业务逻辑。

import React, { Component } from 'react';
import PropTypes from "prop-types";
import { connect } from 'react-redux';

class ProjectForm extends Component {
  constructor(props){
    super(props);
  }

  componentDidMount() {
    const { fetchProject } = this.props;
    // 组件挂载后触发获取项目数据的action
    fetchProject();
  }

  onClick() {
    this.set... // 这里你提到的代码片段未完成，后续可补充表单状态更新/提交等逻辑
  }

  // 这里可以补充组件的render方法，渲染表单UI
  render() {
    const { project, projectTransform } = this.props;
    return (
      <div className="project-form">
        {/* 表单内容，使用project或projectTransform的数据 */}
      </div>
    )
  }
}

// 映射Redux状态到组件props
const mapStateToProps = (state) => {
  // 从Redux全局状态中获取原始project数据
  const project = state.project;
  
  // projectTransform：对原始project数据进行过滤/转换，得到业务需要的过滤值
  // 示例：筛选出标记为活跃的项目
  const projectTransform = project ? project.filter(item => item.isActive) : [];
  
  return {
    project,
    projectTransform
  };
};

// 映射Redux dispatch方法到组件props
const mapDispatchToProps = (dispatch) => {
  return {
    // 触发获取项目数据的action
    fetchProject: () => dispatch({ type: 'FETCH_PROJECT' })
  };
};

// 通过connect方法将组件与Redux连接，导出最终的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(ProjectForm);

关键部分说明 #

• connect方法：Redux连接React组件的核心方法，负责把Redux的状态和dispatch动作映射到组件的props中
• mapStateToProps：这里从Redux全局状态state.project拿到原始项目数据，通过projectTransform完成数据过滤/转换（示例中是筛选活跃项目），最终把需要的状态注入组件
• componentDidMount生命周期：组件挂载完成后自动调用fetchProject，触发Redux的action去获取项目数据
• onClick方法：当前代码片段未完成，通常这里可以处理表单提交、局部状态更新等交互逻辑

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