Erreur de type non interceptée : tags.join n'est pas une fonction.

Question

J'ai une page avec plusieurs balises stockées dans un tableau. Je souhaite modifier la page et lorsque j'essaie de charger le tableau de balises dans TagsInput, j'obtiens le message d'erreur suivant :

Erreur de type non détectée : tags.join n'est pas une fonction

Voici l'extrait de code lié à cette erreur :

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

const UpdatePage = () =>

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

  // Récupération des balises depuis le backend et stockage dans setTags
  setTags(<some_code_for_axios_get>)

  retour(
    <div>
        <FormControl fullWidth margin="normal">
          <TagsEntrée
            label="Balises"
            taille = "petit"
            valeur={tagsString}
            onChange={setTags}
            placeHolder="Tapez votre tag et appuyez sur Entrée"
          />
        </ContrôleFormulaire>
    </div>
 )

}</pré>
<p>J'ai également essayé ce qui suit et j'ai reçu le message d'erreur indiquant que n.map n'est pas une fonction : </p>
<pre class="brush:php;toolbar:false;"><div className="tags">
  {tags.longueur
    ? tags.map((type, i) => (
      <TagsEntrée
        clé={i}
        label="Balises"
        taille = "petit"
        valeur={i}
        onChange={setTags}
        placeHolder="Tapez votre tag et appuyez sur Entrée"
      />
      ))
    : <TagsEntrée
        label="Balises"
        taille = "petit"
        valeur={balises}
        onChange={setTags}
        placeHolder="Tapez votre tag et appuyez sur Entrée"
      />
    }
</div>

À l'aide du code suivant, je peux voir les données dans la console :

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

            

Answer 1

Les tags ne sont pas un tableau, ils sont une chaîne, selon cette ligne :

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

Peu importe ce qui arrive setTags(<some_code_for_axios_get>), the first render, tags will be ""