反应js-当我更改第一个选择器值时，所有第二个选择器选项均更改

Question

这是一个简单的项目，可以创建多个视图并动态控制主题，所有输入都可以正常运行，我可以将数据保存在数组列表中，但是我的问题是选择器，如果有一行，那么就没有问题但是当我创建多个行时，我无法控制秒选择器，因此当我将第一个选择器更改为“ FRONTEND”时，我就不想了，例如，第二个选择器向我展示了所有可用的前端语言，问题是所有选择器都在我的表格受到一次变化的影响。

import React from 'react'
import ReactDOM from 'react-dom'
import Select from 'react-select'
import OnlyNumberInput from './OnlyNumberInput'
import OnlyCharInput from './OnlyCharInput'


class AddFeilds extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            values: [{ firstName: "", lastName: "", age: "", gender: "", phone: "", editable: true, result1: "", result2: "" }],
            firstResult: Object.keys(options)[0],
            secondResult: Object.keys(options)[0][0]
        }

        this.handleFirstResult = this.handleFirstResult.bind(this);
        this.handleSecondResult = this.handleSecondResult.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleFirstResult(event) {
        this.setState({ firstResult: event.target.value });
    }

    handleSecondResult(event) {
        this.setState({ secondResult: event.target.value });
    }
    addClick() {
        this.setState(prevState => ({
            values: [...prevState.values, {
                firstName: "", lastName: "", age: "", gender: "", phone: "", comboController: "", result1: "", result2: "" }]
        }))
    }

    createUI() {
        const renderOptions = item => <option value={item}>{item}</option>
        const firstResultOptions = Object.keys(options).map((item,i) => <option key={i} value={item}>{item}</option>)
        const secondResultOptions = options[this.state.firstResult].map((item,i) => <option key={i} value={item}>{item}</option>)
        return this.state.values.map((el, i) => (
            <div key={i}>
                {/* <OnlyCharInput placeholder="First Name" name="firstName" value={el.firstName || ''} onChange={this.handleChange.bind(this, i)} required /> */}
                <input placeholder="First Name" name="firstName" value={el.firstName || ''} onChange={(event) => this.handleChangeTest(event, i, 'text',5)} disabled={!el.editable}/>
                <input placeholder="Last Name" name="lastName" value={el.lastName || ''} onChange={(event) => this.handleChangeTest(event, i, 'text',5)} disabled={!el.editable}/>
                <input placeholder="Age" name="age" value={el.age || ''} onChange={(event) => this.handleChangeTest(event, i, 'number',5)} disabled={!el.editable}/>
                <input placeholder="Gender" name="gender" value={el.gender || ''} onChange={(event) => this.handleChangeTest(event, i, 'text', 5)} disabled={!el.editable}/>
                <input placeholder="Phone"  name="phone" value={el.phone || ''} onChange={(event) => this.handleChangeTest(event, i, 'number',5)} disabled={!el.editable}/>
                <input type="checkbox" placeholder="editable" name="editable" value={el.comboController || ''} onChange={this.handleChange.bind(this, i)} checked={el.editable} />
                <input type='button' value='remove' onClick={this.removeClick.bind(this, i)} />
                <select onChange={this.handleFirstResult} value={this.state.firstResult}>
                        {firstResultOptions}
                    </select>

                    <select onChange={this.handleSecondResult} value={this.state.secondResult}>
                        {secondResultOptions}
                    </select>
            </div>
        ))
    }

    handleChange(i, e) {
        const { name, checked } = e.target;
        let values = [...this.state.values];
        values[i] = { ...values[i], [name]: checked };
        this.setState({ values });
    }
    handleChangeTest(e, i, type,maxCarct) {
        console.log(type);
        var { name, value } = e.target;
        type == 'number' ? value = value.replace(/[^0-9]/, '') : type == 'text' ? value = value.replace(/[^A-Za-z]/, '') : value = value;
        e.target.maxLength = maxCarct;
        
        console.log(value);
        let values = [...this.state.values];
        values[i] = { ...values[i], [name]: value };
        this.setState({ values });
    }

    removeClick(i) {
        let values = [...this.state.values];
        values.splice(i, 1);
        this.setState({ values });
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + JSON.stringify(this.state.values));
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                {this.createUI()}
                <input type='button' value='add more' onClick={this.addClick.bind(this)} />
                <input type="submit" value="Submit" />
            </form>
        );
    }


}
var  options = {
    "FRONTEND": ["HTML5", "CSS3", "JAVASCRIPT", "JQUERY", "AJAX"],
    "BACKEND": ["JAVA", "C#", "PHP", "PYTHON"],
    "MOKUP": ["PHOTOSHOP", "ADOBEXD ", "BALSAMIQ"]
}
// export default AddFeilds;
ReactDOM.render(<AddFeilds />, document.getElementById('display'));