Reactjs 如何在关闭时重置模态道具

我有一个组件DeleteRoute，它只是一个围绕模态的包装器。它允许我删除一个“路由”实体

我使用React和Redux来维护数据和状态

我正在努力与正确的架构，使模态工作。我不喜欢将所有状态都放在父容器中，因为这会使父容器变得混乱。所以我把redux操作放在modal中。这样，我从父级传入路由，但从deleteRoute组件内的redux存储调用“deleteRoute”，我可以显示成功和错误消息

这一切都很好，除了我关闭并重新打开模式外，仍然显示以前的成功/错误消息。这是因为关闭/打开是通过父级切换完成的，但父级无法重置子道具

我以为我可以在父对象中传递success和error属性，只要父对象重新渲染，它就会重置这些属性，但事实并非如此（尽管在等参线更改时它会重新渲染）

类DeleteRoute扩展了React.Component{
建造师（道具）{
超级（道具）；
this.deleteRoute=this.deleteRoute.bind（this）；
}
deleteRoute（）{
this.props.deleteRoute（this.props.route）；
}
render（）{
var route=this.props.route | |{}；
返回(
删除路由
{this.props.isLoading&&}
{this.props.error}
删除成功
Css平台
产品经理
Css产品
项目主管
Css子管道
拉力赛项目
Css产品活动
Css子管道活动
删除路由{'}
取消
);
}
}
导出默认连接(
state=>state.deleteRouteReducer，
dispatch=>bindActionCreators（actionCreators，dispatch））（DeleteRoute）；
render（）{
返回(
路线
路线定义如何将CSS中的项目导入Rally。使用路线将Rally项目连接到CSS中的一组条件

);

我最后添加了一个redux操作来重置成功和错误道具，然后在模式关闭时调用它。我认为这符合正确的redux体系结构，但如果有人有更好的解决方案，我愿意接受

class DeleteRoute extends React.Component {
  constructor(props) {
    super(props);

    this.deleteRoute = this.deleteRoute.bind(this);
    this.toggle = this.toggle.bind(this);
  }

  deleteRoute() {
    this.props.deleteRoute(this.props.route);
  }

  toggle() {
    if (this.props.isOpen) {
      // reset the error and success messages on close
      this.props.initialize();
    }

    this.props.toggle();
  }

  render() {
    var route = this.props.route || {};

    return (
      <div>
        <Modal
          isOpen={this.props.isOpen}
          toggle={this.toggle}
        >
          <ModalHeader toggle={this.toggle}>Delete Route</ModalHeader>

          <ModalBody>
            {this.props.isLoading && <Spinner color="primary" />}

            <Alert color="danger" isOpen={this.props.error}>{this.props.error}</Alert>
            <Alert color="success" isOpen={this.props.success}>Deleted successfully</Alert>

            <Form>
              <Row form>
                <Col>
                  <FormGroup>
                    <Label for="CssPlatform">Css Platform</Label>
                    <Input disabled name="CssPlatform" type="text" value={route.CSSPlatform} />
                  </FormGroup>
                </Col>

                <Col>
                  <FormGroup>
                    <Label for="ProdManager">Prod Manager</Label>
                    <Input disabled name="ProdManager" type="text" value={route.ProdManager} />
                  </FormGroup>
                </Col>
              </Row>

              <Row form>
                <Col>
                  <FormGroup>
                    <Label for="CssProduct">Css Product</Label>
                    <Input disabled name="CssProduct" type="text" value={route.CSSProduct} />
                  </FormGroup>
                </Col>

                <Col>
                  <FormGroup>
                    <Label for="ProgSupervisor">Prog Supervisor</Label>
                    <Input disabled name="ProgSupervisor" type="text" value={route.ProgSupervisor} />
                  </FormGroup>
                </Col>
              </Row>

              <Row form>
                <Col>
                  <FormGroup>
                    <Label for="CssSubProduct">Css SubProduct</Label>
                    <Input disabled name="CssSubProduct" type="text" value={route.CSSSubProduct} />
                  </FormGroup>
                </Col>

                <Col>
                  <FormGroup>
                    <Label for="RallyProject">Rally Project</Label>
                    <Input disabled name="RallyProject" type="text" value={route.RallyProject} />
                  </FormGroup>
                </Col>
              </Row>

              <Row form>
                <Col>
                  <FormGroup check inline>
                    <Label check>
                      <Input disabled name="CssProductActive" type="checkbox" checked={route.CSSProductActive} />
                      Css Product Active
                    </Label>
                  </FormGroup>
                </Col>

                <Col>
                  <FormGroup check inline>
                    <Label check>
                      <Input disabled name="CssSubProductActive" type="checkbox" checked={route.CSSSubProductActive} />
                      Css SubProduct Active
                    </Label>
                  </FormGroup>
                </Col>
              </Row>
            </Form>
          </ModalBody>

          <ModalFooter>
            <Button color="primary" onClick={this.deleteRoute}>Delete Route</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default connect(
  state => state.deleteRouteReducer,
  dispatch => bindActionCreators(actionCreators, dispatch))(DeleteRoute);

---

你应该扩展你的deletRoute操作，也可以从状态中删除错误。我把错误和成功放在道具中，这样Redux就可以设置它了。所以一个“setState”在deleteRoute中不起作用。也许我不应该从Redux控制这些错误/成功消息。这些错误/成功消息存在于哪里。它们存在于deleteRoute的道具中，在对api进行ajax调用后由Redux设置。

class DeleteRoute extends React.Component {
  constructor(props) {
    super(props);

    this.deleteRoute = this.deleteRoute.bind(this);
    this.toggle = this.toggle.bind(this);
  }

  deleteRoute() {
    this.props.deleteRoute(this.props.route);
  }

  toggle() {
    if (this.props.isOpen) {
      // reset the error and success messages on close
      this.props.initialize();
    }

    this.props.toggle();
  }

  render() {
    var route = this.props.route || {};

    return (
      <div>
        <Modal
          isOpen={this.props.isOpen}
          toggle={this.toggle}
        >
          <ModalHeader toggle={this.toggle}>Delete Route</ModalHeader>

          <ModalBody>
            {this.props.isLoading && <Spinner color="primary" />}

            <Alert color="danger" isOpen={this.props.error}>{this.props.error}</Alert>
            <Alert color="success" isOpen={this.props.success}>Deleted successfully</Alert>

            <Form>
              <Row form>
                <Col>
                  <FormGroup>
                    <Label for="CssPlatform">Css Platform</Label>
                    <Input disabled name="CssPlatform" type="text" value={route.CSSPlatform} />
                  </FormGroup>
                </Col>

                <Col>
                  <FormGroup>
                    <Label for="ProdManager">Prod Manager</Label>
                    <Input disabled name="ProdManager" type="text" value={route.ProdManager} />
                  </FormGroup>
                </Col>
              </Row>

              <Row form>
                <Col>
                  <FormGroup>
                    <Label for="CssProduct">Css Product</Label>
                    <Input disabled name="CssProduct" type="text" value={route.CSSProduct} />
                  </FormGroup>
                </Col>

                <Col>
                  <FormGroup>
                    <Label for="ProgSupervisor">Prog Supervisor</Label>
                    <Input disabled name="ProgSupervisor" type="text" value={route.ProgSupervisor} />
                  </FormGroup>
                </Col>
              </Row>

              <Row form>
                <Col>
                  <FormGroup>
                    <Label for="CssSubProduct">Css SubProduct</Label>
                    <Input disabled name="CssSubProduct" type="text" value={route.CSSSubProduct} />
                  </FormGroup>
                </Col>

                <Col>
                  <FormGroup>
                    <Label for="RallyProject">Rally Project</Label>
                    <Input disabled name="RallyProject" type="text" value={route.RallyProject} />
                  </FormGroup>
                </Col>
              </Row>

              <Row form>
                <Col>
                  <FormGroup check inline>
                    <Label check>
                      <Input disabled name="CssProductActive" type="checkbox" checked={route.CSSProductActive} />
                      Css Product Active
                    </Label>
                  </FormGroup>
                </Col>

                <Col>
                  <FormGroup check inline>
                    <Label check>
                      <Input disabled name="CssSubProductActive" type="checkbox" checked={route.CSSSubProductActive} />
                      Css SubProduct Active
                    </Label>
                  </FormGroup>
                </Col>
              </Row>
            </Form>
          </ModalBody>

          <ModalFooter>
            <Button color="primary" onClick={this.deleteRoute}>Delete Route</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default connect(
  state => state.deleteRouteReducer,
  dispatch => bindActionCreators(actionCreators, dispatch))(DeleteRoute);

import axios from 'axios';

// actions
const deleteRouteType        = "DELETE_ROUTE";
const deleteRouteFailureType = "DELETE_ROUTE_FAILURE";
const deleteRouteSuccessType = "DELETE_ROUTE_SUCCESS";
const initializeType         = "DELETE_ROUTE_INITIALIZE";

const initialState = { error: null, success: null };

// action creators
export const actionCreators = {
  initialize: () => (dispatch) => {
    dispatch({ type: initializeType });
  },

  deleteRoute: (route) => async (dispatch) => {
    dispatch({ type: deleteRouteType });

    axios
      .delete(`api/route`, route)
      .then(res => {
        if (res.data.error) {
          dispatch({ type: deleteRouteFailureType, payload: res.data.errorMessage });
        }
        else {
          dispatch({ type: deleteRouteSuccessType, payload: res.data.data });
        }
      })
      .catch(err => {
        dispatch({ type: deleteRouteFailureType, payload: err.message });
      });
  }
};

// reducers
export const reducer = (state, action) => {
  state = state || initialState;

  switch (action.type) {
    case initializeType:
      return {
        ...state,
        error: null,
        isLoading: false,
        success: false
      };

    case deleteRouteType:
      return {
        ...state,
        error: null,
        isLoading: true,
        success: false
      };

    case deleteRouteFailureType:
      return {
        ...state,
        error: action.payload,
        isLoading: false,
        success: false
      };

    case deleteRouteSuccessType:
      return {
        ...state,
        error: null,
        isLoading: false,
        success: true
      };

    default:
      return state;
  }
};