Ralat Jenis Tidak Ditangkap: tags.join bukan fungsi.

Question

Saya mempunyai halaman dengan berbilang teg yang disimpan dalam tatasusunan. Saya mahu mengedit halaman dan apabila cuba memuatkan tatasusunan teg ke dalam TagsInput saya mendapat mesej ralat berikut:

Uncaught TypeError: tags.join bukan fungsi

Berikut ialah coretan kod yang berkaitan dengan ralat ini:

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

const Halaman Kemas Kini = () =>

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

  // Mengambil teg dari bahagian belakang dan menyimpan ke dalam setTags
  setTags(<beberapa_kod_untuk_axios_get>)

  kembali(
    <div>
        <FormControl fullWidth margin="normal">
          <TagsInput
            label="Tag"
            saiz="kecil"
            value={tagsString}
            onChange={setTags}
            placeHolder="Taip teg anda dan tekan enter"
          />
        </FormControl>
    </div>
 )

}

Turut mencuba perkara berikut dan mendapat mesej ralat bahawa n.map bukan fungsi:

<div className="tags">
  {tags.length
    ? tags.map((type, i) => (
      <TagsInput
        kunci={i}
        label="Tag"
        saiz="kecil"
        nilai={i}
        onChange={setTags}
        placeHolder="Taip teg anda dan tekan enter"
      />
      ))
    : <TagsInput
        label="Tag"
        saiz="kecil"
        value={tags}
        onChange={setTags}
        placeHolder="Taip teg anda dan tekan enter"
      />
    }
</div>

Menggunakan kod berikut, saya dapat melihat data dalam konsol:

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

Answer 1

Tag bukan array, ia adalah rentetan, mengikut baris ini:

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

Tidak kira apa yang berlaku setTags(<some_code_for_axios_get>), the first render, tags will be ""