React表单提交时如何用useState将值存储为数组？

你当前的代码存在两个核心问题，直接导致输入异常：

• <Form.Control>的type="categories"不是合法的HTML输入类型，应该改为type="text"
• 直接把数组categories绑定到输入框的value上，输入框的value仅支持字符串类型，数组会被强制转为逗号分隔的字符串；同时onChange每次都把输入框的当前完整值追加到数组里，导致每输入一个字符就会生成一条冗余数据

完全可以把数组转换逻辑移到submitHandler里，既不影响用户输入体验，又能正确生成后端需要的数组格式，具体实现如下：

修改后的代码 #

import { useState } from 'react';
// 假设Form、Button、FormContainer等组件已导入

const YourComponent = () => {
  // 临时状态存储用户输入的字符串（支持逗号分隔多个类别）
  const [categoryInput, setCategoryInput] = useState('');
  const [price, setPrice] = useState(0);

  const submitHandler = (e) => {
    e.preventDefault();
    // 处理输入字符串：按逗号分割、去除前后空格、过滤空元素
    const processedCategories = categoryInput
      .split(',')
      .map(item => item.trim())
      .filter(item => item);
    
    dispatch(createProduct({
      title,
      desc,
      img,
      categories: processedCategories, // 传入处理后的数组
      size,
      price,
      countInStock
    }));
    // 提交后清空输入框
    setCategoryInput('');
  };

  return (
    <FormContainer>
      <Form onSubmit={submitHandler}>
        <Form.Group controlId="categories">
          <Form.Label>Categories</Form.Label>
          <Form.Control
            type="text" // 修正为合法的text类型
            placeholder="输入类别，用逗号分隔（例如：electronics,phone）"
            value={categoryInput} // 绑定临时字符串状态
            onChange={(e) => setCategoryInput(e.target.value)} // 更新字符串状态
          />
        </Form.Group>

        <Container className="">
          <Row>
            <Col>
              <Button type="submit" variant="primary" className="my-2">
                Create
              </Button>
            </Col>
          </Row>
        </Container>
      </Form>
    </FormContainer>
  );
};

关键改动说明 #

• 用categoryInput字符串状态替代直接绑定数组，用户输入体验和普通文本框完全一致
• 提交时通过split(',')分割字符串，trim()去除每个类别前后的空格，filter()过滤掉空内容（避免用户输入多余逗号导致空元素）
• 修正了输入框的type为合法的text类型，避免浏览器解析异常

如果需要实时展示用户输入的类别列表，可以在组件里添加渲染区域，基于处理后的数组展示：

{(() => {
  const cats = categoryInput.split(',').map(i=>i.trim()).filter(i=>i);
  return cats.length > 0 && (
    <div className="mt-2">
      <span>已选类别：</span>
      {cats.map((cat, idx) => (
        <span key={idx} className="badge bg-secondary mx-1">{cat}</span>
      ))}
    </div>
  )
})()}

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