Question

我有一个ReactJS应用程序，我有一个有一个表的页面，有一个创建按钮，用于创建一个新记录，打开一个模式来输入数据。这工作正常，但我想重用相同的模态来编辑数据。用户可以选择一行，然后单击编辑，但我似乎无法获得所需的数据。

我的对话框如下所示。

render() {
        return (
            <div>
                <h2>Parameters</h2>
                <div className="row">
                    <ParameterDialog callback={this.fetchFromApi} messageCallback={this.props.messageCallback} open={this.state.modalOpen} openCallback={this.openModal} closeCallback={this.closeModal} selectedParameter={this.state.selectedRow} selectedParameterCallback={this.getSelectedParameter} />
                    <div className="col-sm-10">
                        <button type="button" onClick={this.onDelete} className="btn btn-danger pull-right" style={{marginRight: '15px', width: '80px'}}><span className="glyphicon glyphicon-remove"></span> Delete</button>
                        <button type="button" onClick={this.onEdit} className="btn btn-warning pull-right" style={{marginRight: '15px', width: '80px'}}><span className="glyphicon glyphicon-edit"></span> Edit</button>
                    </div>
                </div>
                <BootstrapTable data={this.state.parameters} options={options} pagination selectRow={{mode: 'radio', onSelect: this.onRowSelect}}>
                    <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='groupId' filterFormatted dataFormat={enumFormatter} formatExtraData={this.props.parentState.parameterGroups}
                        filter={{type: 'SelectFilter', options: this.props.parentState.parameterGroups}}>Category</TableHeaderColumn>
                    <TableHeaderColumn dataField='subGroupId' filterFormatted dataFormat={enumFormatter} formatExtraData={this.state.subGroups}
                        filter={{type: 'SelectFilter', options: this.state.subGroups}}>Sub Category</TableHeaderColumn>
                    <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 500 } }>Parameter</TableHeaderColumn>
                    <TableHeaderColumn dataField='type' filterFormatted dataFormat={enumFormatter} formatExtraData={this.props.parentState.parameterTypes}
                                       filter={{type: 'SelectFilter', options: this.props.parentState.parameterTypes}}>Type</TableHeaderColumn>
                    <TableHeaderColumn dataField='reboot'>Reboot</TableHeaderColumn>
                </BootstrapTable>
            </div>
        )
    }

在Dialog组件中，我调用的是尝试获取componentDidMount中的数据，因为当组件挂载时它将始终为null，因为用户尚未选择任何内容。

componentDidMount() {

    console.debug("ParameterDialog mounted...");

    axios({
        method: 'get',
        url: urlBuilder.buildUrl('/api/groups'),
        data: {},
    }).then(resp => {
        this.setState({groups: resp.data});
    }).catch(error => {
        this.props.messageCallback("Ohhhh snap!", "Unable to fetch data from server", Constants.MESSAGE_ERROR)
    });

    axios({
        method: 'get',
        url: urlBuilder.buildUrl(`/api/groups/2/subgroups`),
        data: {}
    }).then(resp => {
        this.setState({subGroups: resp.data});
    }).catch(error => {
        this.props.messageCallback("Ohhhh snap!", "Unable to fetch data from server", Constants.MESSAGE_ERROR)
    });

    // init the state
    this.setState({typeOptions: ['BOOLEAN', 'STRING', 'INTEGER', 'DECIMAL']});
    this.setState({selectedGroup: 2, parameter: '', description: null, type: 'BOOLEAN', rebootRequired: false});

    // if parameterId is present load record from database (Edit mode)
    let parameterId = this.props.selectedParameterCallback();
    if (parameterId) {
        console.debug("Parameter is being edited, loading record");
        this.editMode = true;
        this.loadRecord();
    }
}

模态打开属性绑定到父级，但我真正需要发生的是当打开更改时它检查了selectedParameter值，然后决定是否调用API。

return (
        <div className="col-sm-2">
            <Button bsStyle="primary" onClick={this.props.openCallback}>Add Parameter</Button>
            <Modal show={this.props.open} onHide={this.closeCallback}>
                <Modal.Header>
                    <Modal.Title>Add / Edit Parameter</Modal.Title>
                </Modal.Header>
                .........

然而，这似乎与ReactJS想要工作的方式形成鲜明对比，我唯一能想到的就是将所有状态都移到父组件中，但这会使它变得庞大而且看起来不像是好的模块设计。

还有另一种方法可以实现这一目标吗？如果我可以从父母那里调用一个能完成我需要做的事情的子功能，我认为。

Answer 1

React最适合管理视图，而不是视图背后的操作。

我强烈建议使用Redux来帮助解决这个问题。使用Redux，您可以在动作创建器中进行AJAX调用，并且您的应用程序状态将保留在reducer中。这将大大简化您的React并使其更易于维护。

关于您在哪里维护状态的问题，您可以使用reducer将其保留在Redux状态，并且所有状态更改都将作为props传播到您的React组件。您希望采用自上而下的层次结构设计，以便父组件（对话框的父级）将对话框内容作为对象传递给对话框。该对话框将向活动创建者发送事件以进行加载和更新。

ReactJS重用模式进行添加和编辑

1 个答案: