键入时自动更新对象数组值

Question

我想更新由 React 中的 onChange 事件触发的对象值数组。在这种情况下，我想更新“注意”数据取决于输入（取决于 DETAIL_REQUEST_ID）。当我第一次输入时，“NOTE”已经更新好了。但是输入下一个数据后，之前的数据丢失了

这是我的代码，抱歉我的英语不好。希望你明白我的意思。

import React, { useState } from 'react';
import { render } from 'react-dom';

const App = () => {
  const [data, setData] = useState(null);

  const dummy = [
    { DETAIL_REQUEST_ID: 1, STATUS: "REJECT", NOTE: "" },
    { DETAIL_REQUEST_ID: 2, STATUS: "REJECT", NOTE: "" },
    { DETAIL_REQUEST_ID: 3, STATUS: "REJECT", NOTE: "" },
  ];

  const handleBtn = () => {
    console.log("DATA: ", data);
  };

  const handleChange = (e, id) => {
    let newArr = [...dummy];
    const updatedArr = newArr.map(el => {
      if (id === el.DETAIL_REQUEST_ID) {
        el = { ...el, NOTE: e.target.value };
      }
      return el;
    });
    setData(updatedArr);
  };

  return (
    <div>
      <table>
        <tr>
          <th>Detail Request Id</th>
          <th>Note</th>
        </tr>
        {dummy.map(val => {
          return (
            <tr>
              <td>{val.DETAIL_REQUEST_ID}</td>
              <td>
                <input type="text" onChange={(e) => handleChange(e, val.DETAIL_REQUEST_ID)} />
              </td>
            </tr>
          )
        })}
      </table>
      <button type="submit" onClick={handleBtn}>Submit</button>
    </div>
  );
}

render(<App />, document.querySelector('#app'));

Answer 1

您每次都基于相同的常量 dummy 对象进行状态更新。这将重置状态。您应该改用 data。

import React, { useState } from 'react';
import { render } from 'react-dom';

const App = () => {
  const dummy = [
    { DETAIL_REQUEST_ID: 1, STATUS: "REJECT", NOTE: "" },
    { DETAIL_REQUEST_ID: 2, STATUS: "REJECT", NOTE: "" },
    { DETAIL_REQUEST_ID: 3, STATUS: "REJECT", NOTE: "" },
  ];

  // use the dummy object to initialize the state <============= !!
  const [data, setData] = useState(dummy);

  const handleBtn = () => {
    console.log("DATA: ", data);
  };

  const handleChange = (e, id) => {
    // use the actual state to base your changes off of <============= !!
    let newArr = [...data];
    const updatedArr = newArr.map(el => {
      if (id === el.DETAIL_REQUEST_ID) {
        el = { ...el, NOTE: e.target.value };
      }
      return el;
    });
    setData(updatedArr);
  };

  return (
    <div>
      <table>
        <tr>
          <th>Detail Request Id</th>
          <th>Note</th>
        </tr>
        {/*
            render the actual state (using data, not dummy) <============= !!
        */}
        {data.map(val => {
          return (
            <tr>
              <td>{val.DETAIL_REQUEST_ID}</td>
              <td>
                <input type="text" onChange={(e) => handleChange(e, val.DETAIL_REQUEST_ID)} />
              </td>
            </tr>
          )
        })}
      </table>
      <button type="submit" onClick={handleBtn}>Submit</button>
    </div>
  );
}

render(<App />, document.querySelector('#app'));

键入时自动更新对象数组值

Automatically update array of objects value when typing

javascript

arrays

dom-events

reactjs

react-hooks