React项目中将文本框输入内容转为数组存入state失败问题排查

你代码里存在3处核心错误： #

1. split方法的返回值没有被接收
   JavaScript中字符串是不可变类型，split()方法不会修改原字符串，而是返回拆分后的新数组。你当前写的value.split(",");没有把结果赋值给变量，等于执行后直接丢弃了拆分结果，原value还是字符串类型。
2. state赋值逻辑错误
   你最终存入state的代码是list[index][name] = [value];，不管之前有没有拆分，都是把完整的输入字符串包裹在数组里，最终得到的永远是["输入的完整字符串"]的结构，自然不会是拆分后的数组。
3. input的value绑定和state键名不匹配
   你的state里定义的字段是brand和models，但品牌输入框的value绑定的是x.tillverkare、型号输入框的value绑定的是x.modeller，键名完全对不上，后续还会出现输入内容无法回显的问题。

修正方案： #

直接把handleArrayChange改成如下逻辑即可，不需要额外判断有没有逗号，没有逗号的情况下split返回的就是单元素数组，刚好符合需求：

// handle input change from Models field
const handleArrayChange = (e, index) => {
  const name = e.target.name;
  const value = e.target.value;
  // 直接拆分，自动处理有无逗号的情况，顺便去除每个项前后的空格
  const modelsArray = value.split(",").map(item => item.trim());
  const list = [...inputList];
  list[index][name] = modelsArray;
  setInputList(list);
};

同时修正两个输入框的value绑定：

{/* 品牌输入框 */}
<input
  className="border w-11/12 p-1.5"
  name="brand"
  placeholder="T.ex. Electrolux"
  value={x.brand} // 把x.tillverkare改成x.brand
  onChange={(e) => handleInputChange(e, i)}
/>

{/* 型号输入框 */}
<input
  className="border w-full p-1.5"
  name="models"
  placeholder="SilentPerformer ESP72DB, Pure C9 Allergy PC91-ALRG, ..."
  value={x.models.join(",")} // 把x.modeller改成x.models.join(",")，数组转字符串回显
  onChange={(e) => handleArrayChange(e, i)}
/>

修改后你输入用逗号分隔的型号，state里的models字段就会自动变成拆分后的数组结构，存入Firestore的时候直接用这个字段即可。

内容的提问来源于stack exchange，提问作者Alexander Hylla-Nyberg