React JS中如何将逗号分隔列表转为数组并处理单个ID

原代码存在的问题 #

• 状态定义错误：useState(["ID#1", "ID#2"]).split("[\\s,]+") 完全不符合React useState的用法，useState返回的是包含状态值和更新函数的数组，不能直接调用split；且输入框的value是字符串类型，ids状态应存储字符串而非数组。
• 冗余且未定义状态：addresses变量未声明，id状态属于冗余定义，无需单独维护单个ID的状态。
• 异步函数逻辑错误：循环中错误引用了id[i]（id是单个状态而非数组），且未正确处理输入字符串到数组的转换。

修正后的实现方案 #

1. 修正状态定义 #

将ids改为字符串类型的状态，初始值设为逗号分隔的示例字符串，符合输入框交互逻辑：

const [ids, setIds] = useState("ID#1, ID#2");

2. 输入框保持核心逻辑 #

输入框的value和onChange无需大改，确保用户输入的字符串能正确存入ids状态：

<Input 
  type="text" 
  placeholder="Id(s) (separated by comma if more than 1)" 
  value={ids} 
  onChange={(event) => setIds(event.target.value)} 
/>

3. 正确实现异步处理函数 #

在fetchNft中先将输入字符串转为干净的ID数组，再遍历执行异步操作：

const fetchNft = async (e) => {
  e?.preventDefault(); // 若绑定在表单提交，防止页面刷新

  // 转换输入字符串为数组：分割+去空格+过滤空元素
  const idList = ids.split(/[\s,]+/).filter(id => id.trim() !== "");

  // 顺序执行异步操作（适合需要按顺序处理的场景）
  for (const _id of idList) {
    try {
      const idInfo = await find(_id);
      console.log(`处理ID ${_id} 结果:`, idInfo);
    } catch (err) {
      console.error(`处理ID ${_id} 失败:`, err);
    }
  }

  // 若需并行执行（效率更高，无顺序要求），可改用Promise.all：
  // const promises = idList.map(_id => find(_id).catch(err => ({ error: err, id: _id })));
  // const results = await Promise.all(promises);
  // results.forEach(result => {
  //   result.error 
  //     ? console.error(`处理ID ${result.id} 失败:`, result.error)
  //     : console.log(`处理ID ${result.id} 结果:`, result);
  // });
};

关键细节说明 #

• 字符串转数组的正则：/[\s,]+/ 可匹配任意数量的空格或逗号，兼容用户输入ID1,ID2、ID1 , ID2等多种格式。
• 过滤空元素：filter(id => id.trim() !== "") 避免用户输入多个逗号或首尾空格导致的无效空元素。
• 错误处理：添加try/catch（或Promise.all中的catch）防止单个ID处理失败中断整个流程。

内容的提问来源于stack exchange，提问作者Doughp