2017-06-19 5 views
4

Edit 1Reduce Entfernen nicht korrekt Array Artikel

Verkürzte den Code

removeContentNew(i) { 
    var contents = this.state.templateContent; 
    contents.splice(i, 1); 
    this.setState({ templateContent: contents }); 
    } 

Es ist etwas damit zu tun haben könnte:

componentDidMount() { 
    this.setState({ templateContent: this.props.template.content }); 
    } 

noch die falsche Entfernung auf Bildschirm. Wenn ich den Status protokolliere, gibt es mir jedoch das richtige Array. Vielleicht stimmt etwas nicht mit der Karte?

-

Ich versuche, dieses Stück Code zu Fehler beheben, aber ich kann nicht scheinen, um den Fehler zu finden.

removeContent(i) { 
var $formgroup = false; 
const regex = new RegExp('^content.', 'i'), 
     contents = _.reduce(_.keys(this.refs), (memo, k) => { 
      if (regex.test(k) && k !== 'content.' + i) { 
      var $formgroup = $(this.refs[k]); 

      if (this.props.customer.getSetting('wysiwyg_enabled', true)) { 
       var html = CKEDITOR.instances['html_' + i].getData(); 
      } else { 
       var html = $formgroup.find('[name="html"]').val(); 
      } 

      memo.push({ 
       subject: $formgroup.find('[name="subject"]').val(), 
       html: html, 
       text: $formgroup.find('[name="text"]').val(), 
       language: $formgroup.find('[name="language"]').val() 
      }); 

      } 
      return memo; 
     }, []); 
this.setState({ templateContent: contents }); 
} 

i ist die ID des Elements I templateContents aus dem Array entfernt werden soll. Jedes Mal, wenn ich die Taste eines der Elemente zu drücken, scheint es immer das letzte zu löschen und ignoriert die anderen.

Ich habe einige Tests mit der k Variablen durchgeführt und das könnte die Ursache der Probleme sein, aber ich bin mir überhaupt nicht sicher.

Ich bin wirklich ziemlich neu in der RegExp Art und Weise Dinge zu tun.

Irgendwelche Ideen, wie ich das beheben kann?

+0

Was wollen Sie Ihre regex zu testen? ein beliebiger Wert, der mit Inhalt beginnt und von jedem Zeichen gefolgt wird? Oder irgendein Wert, der mit Inhalt beginnt, gefolgt von einem Punkt? Ich denke nicht, dass die zweite Option sinnvoll ist, weil Sie den Namen der Eigenschaften im Objekt erhalten, da der Punkt ein Zugriffsoperator ist. K hat kein Punktzeichen – Raulucco

+0

@Raulucco Die Regex ist veraltet - Siehe Bearbeiten. Ich habe keine Ahnung, warum Regex in diesem Fall verwendet wurde ... –

+0

Ich glaube nicht, dass Sie die if-Anweisung eingeben, weil 'k', das der Name einer Eigenschaft ist, kein Punkt-Zeichen darin haben wird.Versuchen Sie zu überprüfen, ob 'k === 'content' && _.isObject (this.refs [k]) && ~ _.isUndefined (this.refs [k] [i])' – Raulucco

Antwort

0

Das Problem bestand in der Zuordnung des Arrays. Ich werde das hier lassen, weil es mir geholfen hat, mein Problem zu lösen.

Bad (in der Regel)

<tbody> 
    {rows.map((row, i) => { 
     return <ObjectRow key={i} />; 
    })} 
</tbody> 

Dies ist wohl der häufigste Fehler gesehen, wenn sie über eine Array iterieren in React. Dieser Ansatz funktioniert einwandfrei, es sei denn, ein Element ist hinzugefügt oder aus dem Array Zeilen entfernt. Wenn Sie durch etwas statisches iterieren, dann ist dies vollkommen gültig (z. B. ein Array von Links in Ihrem Navigationsmenü). Werfen Sie einen Blick auf diese detaillierte Erklärung zur offiziellen Dokumentation.

0

Aktualisieren Sie Ihren Zustand in der constructor statt innerhalb componentDidMount Methode.

constructor(pops) { 
    super(props); 
    this.state = { 
    templateContent: this.props.template.content 
    } 
} 

ruft auch zu setState async werden, so dass Sie haben keine Sicherheit, wenn die Änderungen ausgeführt wird