Javascript React：处理映射状态

我对编码非常陌生，并试图找出我遇到的一个问题。 我正在使用axios提取json文件并将其存储在一个状态。（我还使用Redux填充表单） 然后我使用.map（）解析数组，并显示数组中每个对象中的一个值

example json:
unit :
[
    { 
        designName : x, 
        quantity : 0, 
    },
    { 
        designName : y, 
        quantity : 0, 
    },
    { 
        designName : z, 
        quantity : 0, 
    }
]

然后，我添加了一个输入来选择映射值的数量，现在我想将该值返回到状态，以便使用Axios将整个修改后的json发送回API。 我觉得我很接近，但我不确定我需要用handleQuantity函数做什么。 这是我的密码：

import React, { Component } from 'react';
import store from '../../redux_store'
import axios from 'axios';
import { Button, Card } from 'react-bootstrap'
import { Link } from 'react-router-dom'

store.subscribe(() => {
})

class developmentSummary extends Component {
    constructor(props) {
        super(props)

        this.state = {
            prjName: store.getState()[0].developmentName,
            units: []
        }
    }
    componentDidMount() {
        axios.get('https://API')
            .then(
                res => {
                    console.log(res)
                    this.setState({
                        units: res.data.buildings
                    })
                    console.log(this.state.units.map(i => (
                        i.designName
                    )))
                }
            )
    } 
   handleQuantity() {
    }

    render() {
        return (
            <>
                <div className="Text2">
                    {this.state.prjName}
                </div>
                <div className="Text2small">
                    Please select the quantity of buildings from the list below
                </div>
                <ul>
                    {this.state.units.map((object, i) => (
                        <div className="Card-center">
                            <Card key={i} style={{ width: "50%", justifyContent: "center" }}>
                                <Card.Body>{object.designName}</Card.Body>
                                <Card.Footer>
                                    <input
                                        className="Number-picker"
                                        type="number"
                                        placeholder="0"
                                        onChange={this.handleQuantity}
                                        
                                    />
                                </Card.Footer>
                            </Card>
                        </div>
                    ))}
                </ul>

import React，{Component}来自'React'；
从“../../redux\u存储”导入存储
从“axios”导入axios；
从“react bootstrap”导入{按钮，卡片}
从“react router dom”导入{Link}
store.subscribe（（）=>{
})
类开发摘要扩展了组件{
建造师（道具）{
超级（道具）
此.state={
prjName:store.getState（）[0]。开发名称，
单位：[]
}
}
componentDidMount（）{
axios.get（）https://API')
.那么(
res=>{
console.log（res）
这是我的国家({
单位：res.data.buildings
})
log（this.state.units.map）（i=>(
i、 设计名称
)))
}
)
} 
handleQuantity（）{
}
render（）{
返回(
{this.state.prjName}
请从下面的列表中选择建筑物的数量

{this.state.units.map（（object，i）=>(
{object.designName}
))}

---

提前感谢！

您必须将更改

事件

、

单位

对象和

索引

传递到

处理数量

，然后将更改后的单位作为新对象粘贴到未更改单位之间

代码如下：

<input
  className="Number-picker"
  type="number"
  placeholder="0"
  onChange={(event) => this.handleQuantity(event, object, i)}
/>;

handleQuantity = (event, unit, index) => {
  const inputedNumber = +event.target.value; // get your value from the event (+ converts string to number)
  const changedUnit = { ...unit, quantity: inputedNumber }; // create your changed unit

  // place your changedUnit right in between other unchanged elements
  this.setState((prevState) => ({
    units: [
      ...prevState.units.slice(0, index),
      changedUnit,
      ...prevState.units.slice(index + 1),
    ],
  }));
}