React：处理映射状态

Posted 2023-02-22

【中文标题】React：处理映射状态

【英文标题】：React: Handling mapped states

【发布时间】：2020-12-29 18:52:00

【问题描述】：

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

提前致谢！

【参考方案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),
    ],
  ));