javascript - 无法解构“e.target”的属性“名称”，因为它未定义

Question

我收到一些错误消息，说无法解构“e.target”的属性“名称”，因为它在 createform() 方法中未定义。我不明白为什么我会得到它，并且我已经突出显示了给我错误的行。

import React from 'react';
import { Card, Container, Row, Button, Form, Col } from 'react-bootstrap';
import Select from 'react-select';

class Items extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
             itemNames: '',
             formdata: [{itemname: '', quantity: '', rate: '', unit: ''}]
        }
    }

    async handleItems() {
        const url = '/ItemNames'
        const res = await fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type' : 'application/json',
                },
        })

        const json = await res.json()
        let arr = []
        for(let i = 0; i < json.length; i++) {
            let obj = json[i].name
            arr.push({label: obj})
        }
        await this.setState({itemNames: arr})
    }

    componentDidMount() {
        this.handleItems()
    }


    handleChange(i, e) {
        console.log(i)
        console.log(e)
        const {name, value} = e.target
        let formdata = [...this.state.formdata]
        formdata[i] = {...formdata[i], [name]: value}
        this.setState({formdata})
    }

  handleAdd() {
        this.setState(prevState => ({
            formdata: [...prevState.formdata, {itemname: '', quantity: '', rate: '', unit: ''}]
        }))
    }

    createform() {
        return this.state.formdata.map((el, i) => (
            <div key={i}>
                <Card className='mb-2'>
                    <Card.Body>
                        <Row className='mb-2'>
                            <Col>
                                <Form.Group controlId="formBasicSize" className = 'form-group'>
                                    <Form.Label style={{fontWeight:'bold'}}>Item {i+1}</Form.Label>
                                  **<Select value={el.itemname} name='itemname' onChange={this.handleChange.bind(this, i)} placeholder="Enter a Item Name"  type="text" required options = {this.state.itemNames}/> //Getting error here**
                                </Form.Group>
                            </Col>

                            <Col>
                                <Form.Group controlId="formBasicSize" className = 'form-group'>
                                    <Form.Label style={{fontWeight:'bold'}}>Rate (in Rupees)</Form.Label>
                                    <Form.Control value = {el.rate} name = 'rate' onChange={this.handleChange.bind(this, i)} type="text" placeholder="Enter a number"/>
                                </Form.Group>
                            </Col>
                        </Row>

                        <Row className='mb-2'>
                            <Col>
                                <Form.Group controlId="formBasicSize" className = 'form-group'>
                                    <Form.Label style={{fontWeight:'bold'}}>Quantity</Form.Label>
                                    <Form.Control value = {el.quantity} name = 'quantity' onChange={this.handleChange.bind(this, i)} required type="text" placeholder="Enter a number"/>
                                </Form.Group>
                            </Col>

                            <Col>
                                <Form.Group controlId="formBasicSize" className = 'form-group'>
                                    <Form.Label style={{fontWeight:'bold'}}>Quantity Unit</Form.Label>
                                    <Form.Control value = {el.unit} name = 'unit' onChange={this.handleChange.bind(this, i)} required type="text" placeholder="Enter"/>
                                </Form.Group>
                            </Col>
                        </Row>

                        <Row style={{justifyContent: 'center'}} className='mb-1'>
                            <Button variant="danger" size="sm" className="btn" onClick={this.handleRemove.bind(this, i)}>
                                Remove Item
                            </Button>
                        </Row>
                    </Card.Body>
                    </Card>
            </div>
        ))
    }

    render() {

  let { formdata } = this.state
  return(
    <Container>

      <Form className = 'form'>

        {this.createform()}

        <Row className='mt-3 mb-2'>
          <Col>
            <Button variant="primary" className="btn" onClick={this.handleAdd.bind(this)}>
              Add Item
                  </Button>
              </Col>
            </Row>

            <Row className='mt-3 mb-2'>
              <Col>
                  <Button variant="primary" className="btn" block onClick={this.handleSubmit}>
                  Submit
                </Button>
              </Col>
            </Row>

            </Form>

          </Container>

        )
    }
}

export default {Items}

请让我知道为什么事件未定义，因为它在其他输入中起作用，但在我调用 handleChange 时在 Select 输入中不起作用

标签： javascriptreactjs

Answer 1

我不熟悉这种语法：const {name, value} = e.target

您可能希望将代码包装在 if 语句中以避免错误：

if(e && e.target) {
    let formdata = [...this.state.formdata]
    formdata[i] = {...formdata[i], [e.target.name]: e.target.value}
    this.setState({formdata})
}

现在看着它，我不确定 e.target.name 是否有意义。不完全确定您在使用 name 变量做什么。