Javascript 如何在整个redux上更新组件状态

我试图在用户单击编辑按钮时显示模式。我设置了editProject操作。当用户单击编辑按钮时，editProject返回true

但我们可以将redux状态转换为道具而不是组件状态。那么，当道具发生变化时，我们如何动态地更新组件状态呢

下面是EditProjectForm组件

import React from "react";
import {Modal, Button, Form} from "react-bootstrap"
import {connect} from "react-redux";
import {updateProject} from "../../actions";

class EditProjectForm extends React.Component {

    constructor(props) {
        super(props);

        this.state = {status: true}
    }

    onCloseClick() {
        this.setState({status: false})
    }

    onSubmit(e) {
        //TODO update project
    };

    render() {
        return (
            <Modal show={this.state.status} onHide={this.onCloseClick}>
                <Modal.Header closeButton>
                    <Modal.Title>{this.props.project.title}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form onSubmit={this.onSubmit.bind(this)}
                          style={{backgroundColor: "#f5f5f5", paddingBottom: 30}}>
                        <Form.Group controlId="title" style={{margin: 10}}>
                            <Form.Label column>Project Title</Form.Label>
                            <Form.Control type="text" placeholder="Enter a title"/>
                        </Form.Group>

                        <Form.Group controlId="description" style={{margin: 10}}>
                            <Form.Label column>Project Description</Form.Label>
                            <Form.Control as="textarea" placeholder="Enter description"/>
                        </Form.Group>

                        <Button variant="primary" type="submit" className="float-right" style={{marginRight: 10}}>
                            Save
                        </Button>
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={this.onCloseClick}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        )
    }
}

const mapper = function (state) {
    return {
        status: state.editProject,
        project: state.selectProject
    }
};

export default connect(mapper, {updateProject})(EditProjectForm)

从“React”导入React；
从“react bootstrap”导入{Modal，Button，Form}
从“react redux”导入{connect}；
从“../../actions”导入{updateProject}；
类EditProjectForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={status:true}
}
onCloseClick（）{
this.setState（{status:false}）
}
提交（e）{
//TODO更新项目
};
render（）{
返回(
{this.props.project.title}
项目名称
项目说明
拯救
关
)
}
}
常量映射器=函数（状态）{
返回{
状态：state.editProject，
项目：state.selectProject
}
};
导出默认连接（映射程序，{updateProject}）（EditProjectForm）

将此组件连接到商店时，您可以使用

this.props.status

访问

状态

，要更新状态，您需要一个操作ex

updateStatus

请阅读有关操作的更多信息：

从“React”导入React；
从“react bootstrap”导入{Modal，Button，Form}
从“react redux”导入{connect}；
从“../../actions”导入{updateProject}；
类EditProjectForm扩展了React.Component{
render（）{
返回(
{this.props.project.title}
项目名称
项目说明
拯救
关
)
}
}
常量映射器=函数（状态）{
返回{
状态：state.editProject，
项目：state.selectProject
}
};
导出默认连接（映射程序，{updateProject}）（EditProjectForm）

我认为有两种方法可以实现这一点

1-您可以直接在组件中使用Redux state this.props.status，而不是this.state.status，这样您就可以在关闭单击时调度操作，该操作将更新Redux存储并将状态更改为false

2-虽然通常不推荐使用，但您可以使用lifegetDerivedStateFromProps作为驱动工具从道具驱动状态

static getDerivedStateFromProps(props) {
  return {
           status: props.status
  }
}

现在，组件的内部状态是从道具派生的

您可以阅读有关getDerivedStateFromProps的更多信息

---

希望有帮助

您应该添加一些注释来解释您的更改，而不仅仅是转储一堆代码。那么，当用户单击“关闭”按钮时，我将如何关闭模型？第一个选项更有意义，谢谢您的回答。我想这里的问题是，您需要决定您希望您的州位于何处？在组件范围内还是在全局范围内，即Redux？

static getDerivedStateFromProps(props) {
  return {
           status: props.status
  }
}