为什么e.target.value无法直接用于数组中的setState

Question

我正在创建一个简单的表单，用户可以选择一组技能（Python，C ++，Java-使用Bootstrap进行多次选择）并提交表单。

如何设置阵列状态

function handleSkills(e){
    let newElement = e.target.value
    setSkills(oldArray => [...oldArray, newElement]);
}

但是，如果我按以下步骤操作：

function handleSkills(e){
    let newElement = e.target.value
    setSkills(oldArray => [...oldArray, e.target.value]);
}

我得到了错误：

  

TypeError：无法读取null的属性“值”

我想知道为什么会这样。 我当时认为直接使用e.target.value而不是将其分配给变量是可以的，但是事实证明，这样做不是可以的。你知道为什么吗？

我的组件

function MyForm() {
    const [skills, setSkills] = React.useState([])


function handleSkills(e){
    let newElement = e.target.value
    setSkills(oldArray => [...oldArray, newElement]);
}

function handleFormSubmit(e) {
    e.preventDefault()
}

return(
        <div style={{marginTop: "100px", marginRight: "50px", marginLeft: "50px"}}>
            <Row>
                <Col>
                    <Card style={{paddingBottom: "10px"}}>
                        <Container>
                            <Form onSubmit={handleFormSubmit}>
                                    <Form.Label>Add Skills</Form.Label>
                                    <Form.Control as="select" multiple onChange={handleSkills}>
                                        <option>Python</option>
                                        <option>Java</option>
                                        <option>Ruby/Rails</option>
                                        <option>C++</option>
                                        <option>Backend</option>
                                    </Form.Control>
                                </Form.Group>
                                <Button variant="primary" type="submit">
                                    Add Skills
                                </Button>
                            </Form>
                        </Container>
                    </Card>
                </Col>
            </Row>
        </div>
)

}

如果我在e.target.value中直接通过setSkills，则会收到错误消息：

  

TypeError：无法读取null的属性“值”

我想知道为什么会这样。