Блог

Я очень новичок в кодировании и пытаюсь разобраться в проблеме, с которой я столкнулся. Я использую axios для извлечения файла json и сохранения его в состоянии. (Я также использую Redux для заполнения формы) Затем я использую .map() для разбиения массива и отображения одного значения из каждого объекта в массиве.

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

  

Затем я добавил входные данные для выбора количества отображаемого значения, и теперь я хочу вернуть это значение обратно в состояние, чтобы отправить весь измененный json обратно в API с помощью Axios.
Я чувствую, что я близок, но я не уверен, что мне нужно делать с функцией 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>
  

Заранее спасибо!

Вы должны передать изменение 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),
    ],
  }));
}