未捕獲的類型錯誤：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 ""