如何更改从状态反应映射的数组中对象的值

Question

我正在构建最简单的购物车系统，不需要付款或身份验证，只需显示产品，我就在...

我正在显示（映射）[购物车]中的所有项目，用户应该能够输入他们想要的数量。

我的 handleChange 助手有问题

我已经尝试传播和创建购物车的副本

handleChange = (e) => {
    const lights = [ ...this.props.cart ]
    const editCount = { ...lights }
    editCount[e.target.name] = e.target.value
    this.setState({ editCount })
}

const finalCart = this.props.cart
        const cartCard = finalCart.map((light, i) => {
            return (
              <Card key={i}>
                <Container>
                    <Row>
                      <Col>
                      <Image alt="test" src={light.image} height="100"/>
                      </Col>
                      <Col>
                      <div id="lightName">{light.partnumber}</div>
                      <Form onSubmit={this.handleSubmit}>
                        <Form.Control size='sm' type='text' name='count' value={this.state.editCount.count} onChange={this.handleChange}/>
                        <Button variant="primary" type="submit">Submit</Button>
                      </Form>
                </Container>
              </Card>

我无法在我的 handleChange 中完全掌握动态灯，我可以从 stackoverflow 上的其他示例中对其进行硬编码，但没有显示如何动态获取我正在单击（更改）的表单的特定项目

我刚收到undefined

Answer 1

您是否尝试过使用onChange={() => this.handleChange(light.name, light.value)} 并直接在handleChange函数中传递值而不是事件 可能是这样的

handleChange = (name,value) => {
    const lights = [ ...this.props.cart ]
    const editCount = { ...lights }
    editCount[name] = value
    this.setState({ editCount })
}