UseState 数组 Hooks 在输入字段的每次更改中返回一个新对象

Question

我正在为我正在进行的项目使用 React 钩子。我遇到了一种情况，我想在 useState 挂钩中使用数组，但我不确定如何执行此操作。

我创建了一个表格，它根据一个月的天数动态更改其列数。

我尝试过这样的事情：

const [inText, setInText] = useState([]);
const inputText = (e) => {
    setInText([...inText,{
        id:inText.length,
        value:e.target.value
    }]);
}

numberOfDays 是我计算的一个变量。它包含当月的天数。

const renderINP = () => {
    let td = [];
    for (let i = 1; i <= numberOfDays; i++) {
        td.push(<td key={i}><input type="text" onChange={inputText} /></td>);
    }
    return td;
};

这是将表格呈现给浏览器的代码：

<table>
    <tbody>
        <tr className="work-days">
            <td>Working days</td>
            {renderINP()}
        </tr>
    </tbody>
</table>

我尝试用 cosole.log(inText) 捕捉“inText”。当我在输入中输入某些内容时，例如 0，它会创建一个对象 {id: 0, value: '0'}。当我再次输入时，它会创建两个对象 {id: 0, value: '0'} 和 {id: 1, value: '0.'}。此外，当我删除某些内容时，它会创建另一个对象。

如何为每个输入只创建一个对象，以及如何分别获取每个 inText 的值？例如，在第二个输入中获取 inText 的值，而不是所有对象的值。

Answer 1

useState 主要用于保存单个值。在这种情况下，您有一个对象数组，并且想要更新单个对象的值。 useReducer 更可取。

你可以阅读更多关于useReducer

这应该可以满足您的需求：

import React, { useReducer } from "react";

const App = () => {
  const reducer = (state, action) => {
    if (action.type === "ADD") {
      const newState = [...state];
      newState.push({ id: action.id, value: action.value });
      return newState;
    }

    if (action.type === "UPDATE") {
      const newState = [...state];
      const foundItem = newState.find((item) => item.id === action.id);
      foundItem.value = action.value;
      return newState;
    }
  };

  const initialState = [];

  const [state, dispatch] = useReducer(reducer, initialState);

  const numberOfDays = 7;

  const inputText = ({ id, value }) => {
    if (state.find((item) => item.id === id)) {
      dispatch({ type: "UPDATE", id, value });
    } else {
      dispatch({ type: "ADD", id, value });
    }

    console.log(state);
  };

  const renderINP = () => {
    let td = [];
    for (let i = 1; i <= numberOfDays; i++) {
      td.push(
        <td key={i}>
          <input
            type="text"
            onChange={(e) => inputText({ id: i, value: e.target.value })}
          />
        </td>
      );
    }
    return td;
  };

  return (
    <>
      <table>
        <tbody>
          <tr className="work-days">
            <td>Working days</td>
            {renderINP()}
          </tr>
        </tbody>
      </table>

      {JSON.stringify(state)}
    </>
  );
};

export default App;