Multiple-State-Version zusammenführen für React

Question

Ich habe einen einzigen Zustand in meiner React-Komponente, die die Struktur wie folgt hat . Während der Betriebszeit muss ich mehrere Anforderungen an den Server auslösen, um die Daten anzufordern, um den Zustand zu aktualisieren, und dies muss in dem Zustand aktualisiert werden. Da die Anzahl der Datensatz in der Datenbank ziemlich groß ist, muß ich mehrmals

auslösen Wenn ich wie dies tue

request_data(e) { 
    ['a', 'b'].forEach((k) => { 
     // do not mutate the state directly 
     let new_state = _.extend({}, state); 

     request(params, (err, res) => { 
     // set result to the new_state 
     new_state = res; 
     // update the original state 
     this.setState(newState); 
     }) 
    }); 
} 

innerhalb des Rückrufs, wird die zweite Anforderung die Daten der ersten hat fordern Sie den Moment an, in dem es angefordert wird, und aktualisieren Sie den Ursprungszustand mit dem leeren Wert für den ersten Zweig der Zustandsstruktur.

Eine einfache Lösung ist das Aktualisieren des Ursprungszustands direkt, aber ich denke nicht, dass es eine gute Idee ist. Ich plane, redux später zu integrieren, aber in diesem Moment, da die aktuelle Codebasis ziemlich groß ist, ist die schrittweise Migration besser. Allerdings möchte ich den Ursprungszustand nicht direkt ändern, da es nicht der redux Weg ist. Irgendwelche Vorschläge, um dieses Problem zu überwinden?

Answer 1

Ich gehe davon aus, dass Ihr Code geschrieben ist, verwenden Sie ES6-Klassen für Ihre Komponente? Wenn das der Fall, dies wird hoffentlich tidbit helfen:

import React from 'react' 

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     foo:'bar' 
    } 
    } 

    request_data = (e) => { 
    ['a', 'b'].forEach((k) => { 
     // do not mutate the state directly 
     let new_state = _.extend({}, state); 

     request(params, (err, res) => { 
     // set result to the new_state 
     // update the original state 
     this.setState(foo:res.foo) 
     }) 
    }); 
    } 

    render() { 
    return (
     // component code here 
    ) 
    } 
} 

export default MyComponent 

Beachten Sie, dass ich einen Pfeil Funktion für den request_data Teil bin mit ... das ist Notwendigkeit zu vermeiden, um die Funktion der this Variable zu binden, innerhalb der Konstrukteur.

UPDATE:

Ich bin immer noch nicht ganz sicher, ob ich verstehe, welches Problem Sie hier sind, die ... aber wenn Sie nicht redux Recht wollen jetzt verwenden, können Sie mit einer Behälterkomponentenmethode gehen . Im Grunde besteht die Hauptaufgabe Ihrer Containerkomponente darin, die Daten zu verwalten und nichts weiter zu tun, als ihren aktualisierten Status als Requisite an eine untergeordnete Komponente zu übergeben. So etwas wie dieses:

class MyComponentContainer extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     a: { 
     x: 0 
     }, 
     b: { 
     x:0 
     } 
    } 
    } 

    componentWillMount() { 
    ['a', 'b'].forEach((k) => { 
     request(params, (err, res) => { 
      this.setState({ 
      a: res.a, 
      b: res.b 
      }); 
     }) 
    }); 
    } 

    render() { 
    return (
     <MyComponent data={this.state} /> 
    ) 
    } 
} 

class MyComponent extends React.Component { 
    constructor (props) { 
    super(props) 
    } 

    render() { 
    return (
     <div> 
     {/* display stuff here */} 
     </div> 
    ) 
    } 
} 

export default MyComponentContainer