Javascript 如何使用钩子在React中将数组添加到空数组

我试图创建一个随机名称生成器，用户在文本框中输入一组名称，然后从数组中输出一个名称

到目前为止，我有以下几点：

函数应用程序（）{
const[firstNames，setFirstNames]=useState（[''）；
const submitResults=（e）=>{
e、 预防默认值（）；
console.log（firstNames.length）；
};
返回(
setFirstNames（e.target.value）}
/>
);
}

您输入了一个由逗号分隔的名称组成的字符串，因此当您想将其作为数组处理时，需要将该字符串转换为字符串数组

用于按“，”拆分

名字

状态以获取数组

firstNames.split(',').length

函数应用程序（）{
const[firstNames，setFirstNames]=useState（“”）；
const submitResults=（e）=>{
e、 预防默认值（）；
log（firstNames.split（“，”）.length）；
};
返回(
setFirstNames（e.target.value）}
/>
核对姓名
);
}

因为

e.target.value

是一个字符串。您必须将其转换为JSON数组。尝试使用

JSON.parse（e.target.value）

如果我添加JSON.parse并开始键入字母“h”（例如），我会得到一个错误，上面写着“JSON处的意外标记h…”。试试这个

onChange={（e）=>setFirstNames（[…firstNames，e.target.value]）

。这很接近，但是如果我键入它，它会继续添加我之前键入的任何内容，例如，如果我键入“hello”，数组将是[“h”、“he”、“hel”、“hell”、“hello”]你是说用户输入了一个逗号分隔的列表吗？@imnewhere不要忘记使用任何数组过滤和字符串修剪功能，以防用户输入“name one、name two、three”之类的内容，这样你就可以丢弃空字符串。基本上只需在其他地方使用输入之前对其进行消毒。

function App() {
  const [firstNames, setFirstNames] = useState("");

  const submitResults = (e) => {
    e.preventDefault();
    console.log(firstNames.split(",").length);
  };

  return (
    <main>
      <form onSubmit={submitResults}>
        <div className="container">
          <input
            htmlFor="first-selection"
            id="first-selection"
            title="Selection 1"
            value={firstNames}
            onChange={(e) => setFirstNames(e.target.value)}
          />
          <button type="submit">Check Names</button>
        </div>
      </form>
    </main>
  );
}