React.js “Invariant Violation: findComponentRoot”

Je sais que l'erreur est de l'imbriquée trucs et imbriquées _.map fonction, mais je ne peux pas comprendre comment le faire.

Ci-dessous une partie de la fonction rendu:

Ce que je veux faire est:

Case est this.props.currencylist existe
Alors afficher un <select> déroulant
avec le <options> venant de la this.props.currencylist

{ 
  this.props.currencylist ?
  <select  id="fiatselector" onChange={this.onSelectCurrency} value {this.props.selectedcurrency}>
  { 
     _.map(this.props.currencylist, function(currency) { 
       return <option value={currency}> {currency} </option>  
     })
  }
  </select>
  : 
  ""
}

merci beaucoup!

Btw, lors de la première de rendre, il fonctionne parfaitement, il bugs lors de la doivent être mis à jour, nouveau rendu avec une nouvelle liste des devises déclencher l'erreur

Avez-vous une base de js fiddle qui peuvent être testés? Voici un lien vers une question similaire: stackoverflow.com/questions/25026399/...
Est-ce le composant simplement le rendu d'une liste déroulante, seulement? Sens de la racine de cette composante serait un select tag?
la liste déroulante est un enfant de base divs <div className="panel panel-par défaut"> puis <div className="panel-body"> je me demande si cette façon de rendre (nested option avec _.carte) est la bonne manière de faire
J'ai isolé le menu déroulant, à présent, il a seulement des parents, une base de div et il déclenche toujours la même erreur =/
Pouvez-vous poster un peu plus de code? Difficile de dire ce qu'est la question? J'ai rencontré ce problème une fois avant avec le rendu tables. Google chrome ajoute tbody même si rien n'est spécifié. Cette cause, la invariant erreur pour moi. J'ai corrigé par l'ajout de la tbody de balisage. Le vôtre est différent, mais j'aurais besoin de plus de code pour voir.
Plus de code ne va pas aider réellement ce rendu ce simple élément. Je pense que j'ai isolé le problème , c'.accessoires de jeu.liste des devises varie donc quand réagir ne peut pas trouver ou de trouver de nouvelles possibilités que prévu, quelque chose comme ça. Qu'en pensez-vous ? Et comment le corriger ?

InformationsquelleAutor François Richard | 2015-01-05

reactjs

15

Le réel problème ici, c'est l'espace autour de la valeur.
```
<option> {x} </option>
```
Il devrait être:
```
<option>{x}</option>
```
L'ancien extrémités de rendu:
```
<option><span> </span>{x}<span> </span></option>
```
Le navigateur supprime la durée de wrappers, mais ils Réagissent toujours attend d'eux d'être là.
- Bon à savoir, mais j'ai effectivement résolu mon problème de suppression de l'id de la <select>
- J'avais toujours supprimer les espaces. Dans mon cas, il n'y a pas de id, mais l'espacement aidé
InformationsquelleAutor Brigand

J'ai été en mesure de reproduire l'erreur. Apparemment, vous devez ajouter le key attribut à votre option de balises. Je souhaite que je pourrais fournir une meilleure explication, mais je ne sais pas assez sur ReactJs à expliquer.

Ici est le changement en fonction de votre extrait de code (seul changement est l'ajout de la key attribut. Je viens d'utiliser la monnaie comme la clé ici):

_.map(this.props.currencylist, function(currency) {
     return <option key={currency} value={currency}> {currency} </option>
})

Voici un exemple simple que j'ai utilisé pour le test (Légèrement modifié rendu mais même idée):

var CurrentSelector = React.createClass({
    render: function() {
        var options = this.props.currencylist.map(function(currency) {
            return <option key={currency} value={currency}> {currency} </option>
        });
        if (this.props.currencylist) {
            return <div><select id="fiatselector">{options}</select></div>
        } else {
            return <div></div>
        }
    }
});

var App = React.createClass({
    getInitialState: function() {
        return {
            currencylist: [1,2,3],
            selectedcurrency: 1,
        }
    },
    render: function() {
        return (
            <div>
                <CurrentSelector
                    currencylist={this.state.currencylist}
                    selectedcurrency={this.state.selectedcurrency} />
                <button onClick={this.handleClick}>test</button>
            </div>
        );
    },
    handleClick: function() {
        this.setState({
            currencylist: [2, 3, 4, 5],
            selectedcurrency: 2,
        })
    }
});

Les principales forces réagir un composant mise à jour chaque fois que la clé des changements. Chaque fois que la valeur de la clé de changements, de réagir de re-rendre l'ensemble du composant. La valeur de la clé est vraiment une bonne stratégie pour quand composants dynamiques sont à jeter de l'invariant de violations. Il travaille beaucoup à l'époque.

InformationsquelleAutor Gohn67

Vous devez vous connecter pour publier un commentaire.