Réagir JS Error: Invalid tenter de se déstructurent non-itératif exemple

J'ai une sorte de filtre qui prend un tableau pour remplir les options. En essayant de voir l'option value égal au texte dans le tableau, mais j'ai l'erreur dans le titre:

Invalid attempt to destructure non-iterable instance

J'ai besoin de passer le texte en tant que valeur à l'intérieur de la balise d'option, de sorte que lorsque l'utilisateur met à jour le filtre, le texte correct s'affiche pour le choix de l'utilisateur.

Voici mon code:

function Sorting({by, order, rp}: SortingProps) {
    const opts = [
        ['Price (low)', 'price', 'asc'],
        ['Price (high)', 'price', 'desc'],
        ['Discount (low)', 'discount', 'asc'],
        ['Discount (high)', 'discount', 'desc'],
        ['Most popular', 'arrival', 'latest'],
        ['Most recent', 'arrival', 'latest'],
    ];

    const onChange = (i) => {
        const [text, by, order] = opts[i];
        refresh({so: {[by]: order}});
        /* GA TRACKING */
        ga('send', 'event', 'My Shop Sort By', text, 'Used');
    };

    return (
        <div className={cn(shop.sorting, rp.sorting.fill && shop.sortingFill)}>
            <Select className={shop.sortingSelect} label="Sort By" onChange={onChange} value={`${by}:${order}`}>
                {opts.map(([text], i) =>
                    <Option key={i} value={text}>{text}</Option>
                )}
            </Select>
        </div>
    )
}
Sur quelle ligne l'erreur se produit? Quelle est la valeur réelle de i être transmis à votre onChange gestionnaire? Je devine que c'est un objet d'Événement, pas un entier.
Je pense que le problème est dans le paramètre i vous acceptez. Ce ne sera pas un nombre. Vous ne pouvez pas l'utiliser comme un tableau d'index.

OriginalL'auteur Filth | 2017-02-09

  1. 2

    Vous n'êtes pas à passer un argument avec votre onChange, c'est une chose assez commune à miss - cependant un peu moins évident avec un select/option de combinaison.

    Il devrait ressembler à quelque chose comme:

    class Sorting extends React.Component {

    constructor(props) {
      super(props);

      this.opts = [
          ['Price (low)', 'price', 'asc'],
          ['Price (high)', 'price', 'desc'],
          ['Discount (low)', 'discount', 'asc'],
          ['Discount (high)', 'discount', 'desc'],
          ['Most popular', 'arrival', 'latest'],
          ['Most recent', 'arrival', 'latest'],
      ];

      this.state = {
        selected: 0, //default value
      }

      this.onChange = this.onChange.bind(this);
    }

    onChange(i) {
      const [text, by, order] = opts[i.target.value];
    };

    render() {
      return (
          <div>
              <select onChange={this.onChange} value={this.state.selected}>
                  {this.opts.map(([text], i) =>
                      <option key={i} value={i}>{text}</option>
                  )}
              </select>
          </div>
      )
    }
}
ReactDOM.render(<Sorting />, document.getElementById("a"));

    Note je l'ai dépouillé de vos catégories et de styles pour garder les choses simples. Notez également que vous ont été en utilisant des majuscules et Sélectionnez l'Option - sauf si cela est de coutume dans la maison de composants, ils doivent être en minuscules.

    Note2 j'ai également présenté l'état, puisque l'état de l'sélectionnez doit être stocké quelque part - si vous êtes le maintien de l'état de la zone de sélection à l'extérieur de ce composant, vous pouvez évidemment utiliser une combinaison d'accessoires/rappels de maintenir la valeur d'un niveau plus élevé.

    http://codepen.io/cjke/pen/egPKPB?editors=0010

    Ok c'est près cependant, je reçois le message d'erreur disant "Impossible de lire la propriété "valeur " undefined"... bizarre
    Êtes-vous sûr que vous avez copié tout...? Le codepen œuvres. En tout, je veux dire le "bind" dans le constructeur ainsi que la mise à jour de la valeur et de l'état
    La façon dont ce projet est l'installation à réagir n'est pas ce dont vous auriez normalement à l'exportation de composants. Je suis d'accord avec l'utilisation de la classe et de l'introduction de l'état cependant, ce projet n'est pas la gestion de l'état et à l'aide de réagir juste pour le rendu des composants. Il est accroché en PHP donc je ne peux pas introduire de l'état - le site des bombes.
    .... si vous ne pouvez pas utiliser de l'état, eh bien, rien ne sera mise à jour? À tous. Il pourrait aussi bien être statique html - à moins que quelque chose m'échappe
    Haha ok, je sais pas bien quoi dire... bonne chance? Je ne pense pas que vous aurez une réponse qui n'implique pas de l'état quelque part jusqu'à la chaîne. Si vous êtes deving php app (et je sais que cela peut ne pas être une option) et vous avez juste besoin d'un peu d'interactivité sur le devant, pensez simplement à l'aide de jquery

    OriginalL'auteur Chris

  2. 1

    Problème est variable i, je vais être le cas object, utilisez i.target.value pour obtenir le value sélectionné par l'utilisateur, une chose de plus que vous avez utilisé text que la valeur de la options, plutôt que d'utiliser le index, cela va fonctionner, essayez ceci:

    const onChange = (i) => {
        const [text, by, order] = opts[i.target.value];
        refresh({so: {[by]: order}});
        /* GA TRACKING */
        ga('send', 'event', 'My Shop Sort By', text, 'Used');
    };

    return (
        <div className={cn(shop.sorting, rp.sorting.fill && shop.sortingFill)}>
            <select className={shop.sortingSelect} label="Sort By" onChange={onChange} value={`${by}:${order}`}>
                {opts.map(([text], i) =>
                    <option key={i} value={i}>{text}</option>
                )}
            </select>
        </div>
    )

    Cochez cette fiddle: https://jsfiddle.net/5pzcr0ef/

    Ce ne sera pas la valeur de l'option sélectionnée dans la liste déroulante. Il sera un objet d'événement. La valeur sélectionnée sera event.target.value.
    merci pour le tuyau, désolé de mon erreur 🙂
    Oui, j'ai ce code déjà, mais l'option ne pas afficher la nouvelle valeur si la valeur est égale à i
    vérifiez la mise à ans, retiré toute la valeur de l'état, son travail correctement 🙂
    Puisque nous n'avons pas vu le code de la Select composant nous n'avons aucun moyen de savoir quelle est la valeur de i est. Les gestionnaires d'événements sur les éléments de e.g <select>) sont appelés avec un objet d'Événement comme premier argument, mais <Select> (capitale "S") n'est pas un élément naturel, donc sans voir sa mise en œuvre, nous n'avons aucun moyen de savoir quels sont les argument(s) sont transmises.

    OriginalL'auteur Mayank Shukla