如何在动态HTML内容中显示动态状态值？

Question

我有以下具有文件上传功能的React应用。我在render函数中有一个文件上传HTML部分，还有一个添加更多文件上传部分的按钮。当我添加更多部分时，我还将添加具有唯一ID的新状态以标识所有数据。 问题是，我的HTML部分中有一个下拉列表，并且无法将所选值与onChange函数一起使用。 onChange函数运行正常，因此我可以在控制台中看到更改的值，但无法在“下拉列表”中显示它。无论选择什么，“选择”菜单始终显示“选择状态” 。如何将所选名称放在下拉列表中？

class UploadModal extends Component {
    constructor(props) {
        super(props);

        this.allUploads = [];

        this.state = {
            allUpload: this.allUploads,

            fileName0: '',
            businessFileType0: 'null',
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.onFileChange = this.onFileChange.bind(this);
    }

    selecFileTypeHandle = event => {
        const name = event.target.name;
        this.setState({ [name]: event.target.value }, () => 
          console.log("this", name, this.state[name]))
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    onFileChange(event) {
        const name = event.target.name;
        this.setState({
            [name]: event.target.files[0],
            [`uploadedFileName${name}`]: event.target.files[0].name,
            loaded: 0,
            [`fileExtension${name}`]: event.target.files[0].name.split('.').pop()
        }, () => console.log("enawa", this.state[`uploadedFileName${name}`], name))
    }

    appendData = () => {
        dataId = dataId + 1;
        this.setState({
            [`fileName` + dataId]: '',
            [`businessFileType` + dataId]: 'null',
        }, () =>
            this.appendedData(dataId),
        )
    }

    appendedData = (dataId) => {
        this.allUploads.push(
            <div className="fileInputDiv" key={dataId}>
                <div className="fileUploadBtn">
                    <input
                        className={this.props.classes.input}
                        style={{ display: 'none' }}
                        type="file"
                        id={`fileInput` + dataId}
                        name={`uploadedFile` + dataId}
                        onChange={this.onFileChange}
                    />
                    <label htmlFor={`fileInput` + dataId}>
                        <Button variant="raised" component="span" className={`${this.props.classes.button} uploadBtn`}>
                            <div className="uploadTxt">Upload files</div>
                            <div className="uploadSubTxt">Max size 20MB</div>
                        </Button>
                    </label>
                    <div style={{ float: 'left', paddingTop: '14px', paddingLeft: '14px' }}>{this.state[`uploadedFileNameuploadedFile` + dataId]}</div>
                    <div className="CIErrorLog" style={{ display: this.state[`uploadedFile` + dataId] === null ? "block" : "none", float: 'unset', width: 'unset' }}>
                        <span>File must be inserted</span>
                    </div>
                </div>
                <div className="uploadInputs" style={{ width: '100%' }}>
                    <div className="fileDetailsDiv">
                        <div className="fileOriginalName"></div>
                    </div>
                    <div className="formRow">
                        <div className="formField halfSecWidth">
                            <Select
                                value={this.state[`businessFileType` + dataId]}
                                onChange={this.selecFileTypeHandle}
                                className={`${this.props.classes.select} fullWidth marginBotMin`}
                                inputProps={{
                                    name: 'businessFileType' + dataId,
                                    id: 'businessFileType' + dataId,
                                }}
                            >
                                <MenuItem value={'null'}>Select State</MenuItem>
                                {this.state.fileTypes
                                    .map(type => {
                                        return (
                                            <MenuItem key={type.id + dataId} value={type.name}>{type.name}</MenuItem>
                                        );
                                    })
                                }
                            </Select>
                        </div>
                    </div>
                </div>
            </div>
        );
        this.setState({
            allUpload: this.allUploads,
        });
    }

    render(){
       return(
           <div>
              <button onClick={this.appendData}>ADD</button>
              {this.allUploads}
           </div>
       )
    }
}