反应：具有动态值的多个下拉菜单

Question

我有一个包含多个工作站的表单页面，每个工作站都需要分配到从服务器获取的特定位置。我确实有一张表格，可以同时映射电台和所选/保存的位置。

我想知道如何更新每个项目并将其保存到父状态以提交。

这是我到目前为止的编辑页面：

class EventMerchantStationLocationEdit extends React.Component {

static propTypes = {
    merchants: PropTypes.array
};

constructor (props) {
    super(props);
    this.state = {
        entity: [
            {
                selectedMerchant: 0,
                stationId: undefined
            }
        ],
        isLoaded: false,
        stationList: [],
        error: undefined
    };
}

componentDidMount () {
    API.get("AdministrationAPI", "/administration/api/station").then((result) => {
        this.setState({stationList: result.content, isLoaded: true});
    }).catch((error) => {
        Swal("Station Not Found", error.response.data, "error");
        this.setState({error: error, isLoaded: true});
    });
}

render () {

    const {stations, merchants} = this.props;
    const rows = this.state.stationList.map((item) => {
        return (
            <EventMerchantStationLocationRow entity={item} merchants={merchants} selectedEntity={this.state.entity}
                                             key={"event-location-row-" + item.id + "-" + item.name}/>
        );
    });
    const backAndSuccessLink = `/administration/event/edit/${this.props.match.params.eventId}`;

    return (
        <div className="row mb-4">
            <div className="col-lg-12">
                <React.Fragment>
                    <form onSubmit={(event) => this.handleFormSubmit(event, backAndSuccessLink)} className={"mb-4"}>
                        <div className="card">
                            <div className="card-header">
                                <CardHeaderWithSubmit
                                    header={"Station Location Edit"}/>
                            </div>

                            <div className="card-body">

                                {this.state.error !== undefined &&
                                <FormAlert message={this.state.error.message} type="error" className="no-margins"/>
                                }

                                {(rows.length > 0 && this.state.isLoaded) &&
                                <div className="table-responsive-md">
                                    <table className="table table-bordered table-striped table-hover table-sm no-margins">
                                        <thead>
                                        <tr>
                                            <th>Station</th>
                                            <th>MAC Address</th>
                                            <th>Merchant Location</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {rows}
                                        </tbody>
                                    </table>
                                </div>
                                }
                            </div>
                        </div>
                    </form>
                </React.Fragment>
            </div>
        </div>
    );
}
}

class EventMerchantStationLocationRow extends React.Component {

static propTypes = {
    "entity": PropTypes.object.isRequired,
    "merchants": PropTypes.array.isRequired,
    "selectedEntity": PropTypes.array.isRequired
};

constructor (props) {
    super(props);
    this.state = {
        selectedEntity: [
            {
                selectedMerchant: 0,
                stationId: undefined
            }
        ],
        error: undefined

    };
}

componentDidMount () {
    this.setState({selectedEntity: this.props.selectedEntity});
}

handleSelectChange = (selected, stationId) => {
    console.log(stationId);
    this.setState((previousState) => ({
        selectedEntity: {
            ...previousState.selectedEntity,
            selectedMerchant: selected.value,
            stationId: stationId
        }
    }));
    console.log(this.state);
};

updateItem = (id, itemAttributes) => {
    let index = this.state.selectedEntity.findIndex(x => x.id === id);
    if (index === -1) {
        console.log("Station does not exist");
    }
    // handle error
    else {
        this.setState({
            selectedEntity: [
                ...this.state.selectedEntity.slice(0, index),
                Object.assign({}, this.state.selectedEntity[index], 
itemAttributes),
                ...this.state.selectedEntity.slice(index + 1)
            ]
        });
    }
};

render () {
    const transformedMerchantList = DomainObjectTransformer.transformMerchantListForSelect(this.props.merchants);

    return (
        <tr>
            <td>{this.props.entity.name}</td>
            <td>{this.props.entity.mac}</td>
            <td><Select options={transformedMerchantList}
                        onChange={this.updateItem(this.props.entity.id)}
                // isOptionSelected={this.isOptionSelected}
                        isMulti={false}
            /></td>
        </tr>
    );
}

}

const mapStateToProps = (state) => {
return {
    "stations": state.StationReducer.stations,
    "merchants": state.MerchantReducer.merchants
};
};

const mapDispatchToProps = (dispatch) => {
return {
    fetchAndUpdateStationListIfRequired: () => dispatch(fetchAndUpdateStationListIfRequired())
};
};

export default connect(mapStateToProps, mapDispatchToProps)(EventMerchantStationLocationEdit);

第二个类（EventMerchantStationLocationRow）位于同一页面上，而不是单独的组件。

我觉得我已经复杂了一些本来应该更简单的事情。如果有人采用我应该采用的其他方法，我很乐意这样做。