未捕获的类型错误：tags.join不是一个函数。

Question

我有一个页面，其中有多个标签存储在一个数组中。我想编辑该页面，并尝试将标签数组加载到TagsInput中时，出现以下错误消息：

Uncaught TypeError: tags.join is not a function

以下是与此错误相关的代码片段：

import { TagsInput } from "react-tag-input-component";

const UpdatePage = () => {

  const [tags, setTags] = useState("");
  const tagsString = tags.join(", ");

  // Fetching tags from backend and storing into setTags
  setTags(<some_code_for_axios_get>) 

  return(
    <div>
        <FormControl fullWidth margin="normal">
          <TagsInput
            label="Tags"
            size="small"
            value={tagsString}
            onChange={setTags}
            placeHolder="Type your tag and press enter"
          />
        </FormControl>
    </div>
 )

}

还尝试了以下方法，并得到了n.map不是一个函数的错误消息：

<div className="tags">
  {tags.length
    ? tags.map((type, i) => (
      <TagsInput
        key={i}
        label="Tags"
        size="small"
        value={i}
        onChange={setTags}
        placeHolder="Type your tag and press enter"
      />
      ))
    : <TagsInput
        label="Tags"
        size="small"
        value={tags}
        onChange={setTags}
        placeHolder="Type your tag and press enter"
      />
    }
</div>

使用以下代码，我可以在控制台中看到数据：

tags.forEach((element) => {
    console.log(element);
  });

Answer 1

标签不是一个数组，它们是一个字符串，根据这一行：

const [tags, setTags] = useState("");

无论发生什么情况 setTags(<some_code_for_axios_get>), the first render, tags will be ""