Reactjs 如何通过 React JS 中的映射将新元素添加到对象数据数组中

发布于02月06日

export default function App() {
  const measurementData = {
    id: 301,
    name: "Topwear",
    measurements: [
      { id: 1, name: "neck" },
      { id: 2, name: "shoulder" }
    ]
  };

  return (
    <div className="App mt-5">
      <h1>Update Measurement Data</h1>
      {measurementData.measurements?.map((data) => {
        return (
          <div className="d-flex">
              <label className="col-form-label">{data.name}</label>
              <input type="number" name={data.name} className="form-control"/>
          </div>
        );
      })}
    </div>
  );
}

基本上，我是在对象中进行贴图. 我只想添加一个名为Value的新属性，并将从输入字段(Value:20)获得的值保存在measurementData中对象的测量数组的末尾.

//示例:在输入字段中输入值后，对象应该是这样的

  {
      id: 301,
      name: "Topwear",
      measurements: [
        { id: 1, name: "neck", value: 20},
        { id: 2, name: "shoulder", value: 40 }
      ]
  }

Some UI example个

推荐答案

您可以通过为measurements创建状态来实现这一点.这允许Reaction在用户在输入中键入内容时重新呈现UI.我将measurementData代码移出了组件，如果这是动态的，您可以简单地将其放回原处.

当在measurements上进行映射以渲染它们时，我们为输入提供valueprops 并传递该测量的当前值.如果没有值，则默认为0.

import { useState } from "react";

const measurementData = {
  id: 301,
  name: "Topwear",
  measurements: [
    { id: 1, name: "neck" },
    { id: 2, name: "shoulder" },
  ],
};

export default function App() {
  // create the state
  const [measurements, setMeasurements] = useState(
    measurementData.measurements
  );

  // create the onChange handler
  const handleOnChange = (e) => {
    const value = e.target.value;
    const name = e.target.name;
    setMeasurements((prevState) => {
      // map over the prev measurements
      return prevState.map((measurement) => {
        // if the name is not the same just return the measurement
        if (measurement.name !== name) return measurement;
        // else return a new object with the prev measurement and the new value
        return {
          ...measurement,
          value: value,
        };
      });
    });
  };

  return (
    <div className="App mt-5">
      <h1>Update Measurement Data</h1>
      {measurements.map((measurement) => {
        return (
          <div className="d-flex">
            <label className="col-form-label">{measurement.name}</label>
            <input
              type="number"
              name={measurement.name}
              value={measurement.value ?? 0}
              onChange={handleOnChange}
              className="form-control"
            />
          </div>
        );
      })}
    </div>
  );
}