React中TagsInput加载标签数组时出现Uncaught TypeError求助

核心错误原因 #

1. 初始状态类型不匹配：你把tags的初始值设成了字符串""，但join()是数组专属方法，字符串调用该方法必然报错。而且react-tag-input-component的TagsInput组件，本身要求value是数组类型，而非字符串。
2. 组件用法误解：循环渲染多个TagsInput完全没必要，这个组件原生支持多标签的输入与展示，单个组件即可处理所有标签。

修正后的完整代码 #

import { TagsInput } from "react-tag-input-component";
import { useState, useEffect } from "react";
import axios from "axios";

const UpdatePage = () => {
  // 初始值设为空数组，和后端返回的标签数组类型保持一致
  const [tags, setTags] = useState([]);

  // 用useEffect包裹异步请求，避免组件重复渲染时多次发起请求
  useEffect(() => {
    const fetchTags = async () => {
      try {
        const response = await axios.get("<你的后端接口地址>");
        // 确保后端返回的是数组，直接更新状态
        setTags(response.data);
      } catch (error) {
        console.error("获取标签失败:", error);
      }
    };
    fetchTags();
  }, []);

  return (
    <div>
      <FormControl fullWidth margin="normal">
        <TagsInput
          label="Tags"
          size="small"
          value={tags} // 直接传入数组类型的标签数据
          onChange={setTags} // onChange会返回更新后的标签数组，直接同步到状态
          placeHolder="Type your tag and press enter"
        />
      </FormControl>
    </div>
  );
};

关键修正点说明 #

• 初始状态修正：将useState("")改为useState([])，保证tags在任何状态下都是数组类型，避免类型不匹配的报错。
• 异步请求规范：用useEffect包裹axios请求，遵循React生命周期逻辑，防止不必要的重复请求。
• 组件参数调整：TagsInput的value直接传入数组，onChange回调会自动返回更新后的标签数组，无需手动处理字符串拼接或循环逻辑。

之前尝试失败的原因 #

• 第一种写法中，初始tags是字符串，调用tags.join()必然报错；即使后端返回数组后，将数组转为字符串传给value，组件也无法正确识别（它期望接收数组）。
• 第二种写法循环渲染多个TagsInput，完全误解了组件的设计逻辑——该组件内部已经实现了多标签的渲染与管理，不需要手动循环生成组件。

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