React：使用Select下拉列表动态地创建组件

Question

我正在从服务器获取对象数组。该数组中的ForEach对象添加 状态中的新对象，这将是下拉菜单中的选项，并将所有内容保存在状态中。然后使用带有数据和下拉值的地图渲染组件。问题是，如何更改每个唯一组件的放置值

state = {

        allCampaigns: [],
        inputDropdown: {
            dropDown: {
                elementType: 'select',
                elementConfig: {
                    type: "dropdown",
                    options: [
                        {
                            value: "Update",
                            displayValue: "Update"
                        },
                        {
                            value: "Start",
                            displayValue: "Start"
                        },
                        {
                            value: "Pause",
                            displayValue: "Pause"
                        },
                        {
                            value: "Stop",
                            displayValue: "Stop"
                        },
                        {
                            value: "Delete",
                            displayValue: "Delete"
                        },
                    ],
                },
                value: '',
            }
        },
        choosedCampaign: null,
    }

componentDidMount() {
    this.props.onInitAllCampaigns(this.props.customerId, 
    this.state.pageNumber, this.state.pageSize);
}

componentDidUpdate(prevProps, prevState) {
    if (prevProps.allCampaigns !== this.props.allCampaigns) {
        const allCampaignsFromProps = this.props.allCampaigns;
        const campaignActions = this.state.inputDropdown.dropDown;
        allCampaignsFromProps.forEach(function (action) { 
        action.actionType = campaignActions })
        this.setState({ allCampaigns: allCampaignsFromProps })
    }
}

inputActionType = (event, campaignIndex) => {
    const updatedAllCampaigns = {
        ...this.state.allCampaigns
    }
    const updatedCampaign = {
        ...updatedAllCampaigns[campaignIndex]
    }
    updatedCampaign.actionType.value = event.target.value;
    updatedAllCampaigns[campaignIndex] = updatedCampaign
    this.setState({ allCampaigns: updatedAllCampaigns })
}

currentCampaign = (index) => {
    let campaigns = this.state.allCampaigns
    for (let i = 0; i < campaigns.length; i++) {
        if (i === index) {
            this.setState({ choosedCampaign: campaigns[i] })
        }
    }
}

render() {
    const campaignsArray = [];
    for (let index in this.state.allCampaigns) {
        campaignsArray.push({
            id: index,
            config: this.state.allCampaigns[index]
        })
    }
    <div className={classes.Container}>
      <div className={classes.CamapignsWrapper}>
        {campaignsArray.map((campaign, index) => (
          <UserCampaign
            key={campaign.id}
            campaignKey={campaign.id}
            //Campaign values
            name={campaign.config.name}          
            onClick={this.currentCampaign.bind(this,index)}
            // Input values
            keyInput={index}
            inputTypes={campaign.config.actionType.elementConfig.type}
            elementType={campaign.config.actionType.elementType}
            elementConfig={campaign.config.actionType.elementConfig}
            value={campaign.config.actionType.value}
            changed={(event) => this.inputActionType(event, campaign.id)}
            classNameInput={classes.InputDropDown}>
      </UserCampaign>

目前，在所有尝试中，我始终会更改所有组件中的值。