Question

我对编码非常陌生，试图找出遇到的问题。我正在使用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>

谢谢！

Answer 1

您必须将更改event，unit对象和index传递到handleQuantity，然后将更改后的单元作为新对象粘贴到未更改的单元之间。

代码如下：

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

还有handleQuantity

的代码

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),
    ],
  }));
}

反应：处理映射状态

1 个答案: