如何在 React -TypeScript 中使用 useState 更新、扩展数组？

Question

请帮帮我。我想动态添加额外的输入字段并将值保存到 textValues 状态。
这是我到目前为止尝试过的方法：

const [textValues, setTextValues] = useState([]);
const [numberOfTexts, setNumberOfTexts] = useState(5); <--- this value will be change dynamically

{[...Array(numberOfTexts)].map((x, i) => (
 <TextField
  style={{ marginLeft: "10px", marginTop: "10px" }}
  id="standard-basic"
  label="Text value"
  value={textValues[i]}
  onChange={(e: { target: { value: any } }) =>
  setTextValues(e.target.value)
}
/>
))}

所以，在这种情况下，我希望出现 5 个输入字段，并且在 textValues 数组中为 5 个空字符串，然后逐步填写。我希望能够增加和减少 numberOfTexts，并根据文本数量更新所有内容。感谢您的帮助！

Answer 1

对于简单的用例，您不需要 2 useState 来处理字段数量及其值。

通常这是定义最小数据集模型的最佳做法。

您可以在 setTextValues 之上编写抽象函数，它应该可以解决问题；）

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [textValues, setTextValues] = useState([]);

  const addField = () => {
    setTextValues(textValues.concat([""]));
  };

  const updateField = (index, newValue) => {
    const newValues = textValues.map((val, idx) => {
      if (idx === index) {
        return newValue;
      }
      return val;
    });

    setTextValues(newValues);
  };

  const removeField = () => {
    setTextValues(textValues.slice(0, textValues.length - 1));
  };

  return (
    <div>
      <button onClick={() => addField()}>Add field</button>
      <button onClick={() => removeField()}>Remove (last) field</button>
      <br />
      <div>
        {textValues.map((textValue, idx) => (
          <input
            style={{ marginLeft: "10px", marginTop: "10px" }}
            id="standard-basic"
            label="Text value"
            value={textValue}
            onChange={(e) => {
              updateField(idx, e.target.value);
            }}
          />
        ))}
      </div>
    </div>
  );
}

更进一步，您可能需要创建自定义挂钩来抽象此逻辑，并拥有可重用的状态块。 API 可能如下所示：

const { addField, removeField, updateField } = useInputArray(['hello', 'yo'])

Answer 2

到目前为止，不需要对代码进行太多更改的一种方法是使用 useEffect() 挂钩在 numberOfTexts 更改时更新字符串数组。

您可以通过添加以下代码来完成此操作：

useEffect(() => {
  let dif = numberOfTexts - textValues.length;
  if (dif > 0) {
    setTextValues(textValues.concat(Array(dif).fill('')));
  } else if (dif < 0) {
    setTextValues(textValues.slice(0, numberOfTexts));
  }
}, [numberOfTexts]);

这将根据 numberOfTexts 数组动态更新 textValues 数组。

如何在 React -TypeScript 中使用 useState 更新、扩展数组？

How to update, extend arrays by using useState in React -TypeScript?

arrays

reactjs

typescript

dynamically-generated

use-state