Holen Sie Versprechen Wert reagieren Komponente

Habe ich eine helper-Funktion in meine Komponente. Wenn ich console.log(helperFunction()) es, bekomme ich diese in der Konsole.

Holen Sie Versprechen Wert reagieren Komponente

Wenn ich versuche, um die Helfer-Funktion, um ein Eingabefeld für seinen Wert. Ich bekomme diese angezeigt.

Holen Sie Versprechen Wert reagieren Komponente

Wie bekomme ich die [[PromiseValue]] in meiner Eingabe?

  render() {
    console.log(getProjectName());
    return (
      <form ref={(input) => this.eventForm = input} onSubmit={(e) => this.createEvent(e)} className="slds-form">
        <div className="slds-form-element">
          <label className="slds-form-element__label">Assigned To</label>
          <div className="slds-form-element__control">
            <input ref={(input) => this.assigned = input} type="text" className="slds-input"  disabled/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Related To</label>
          <div className="slds-form-element__control">
            <input ref={(input) => this.related = input} type="text" className="slds-input" defaultValue={getProjectName()} disabled/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Subject</label>
          <div className="slds-form-element__control">
            <input ref={(input) => this.subject = input} type="text" className="slds-input"/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Location</label>
          <div className="slds-form-element__control">
            <input ref={(input) => this.location = input} type="text" className="slds-input" />
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Event Start</label>
          <div className="slds-form-element__control">
            <input ref={(input) => this.start = input} type="text" onChange={(e) => this.onChange(e)} className="slds-input" value={ this.state.start }/>
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Event End</label>
          <div className="slds-form-element__control">
            <input ref={(input) => this.end = input} type="text" onChange={(e) => this.onChange(e)} className="slds-input" value={ this.state.end } />
          </div>
        </div>
        <div className="slds-form-element">
          <label className="slds-form-element__label">Contact</label>
          <div className="slds-form-element__control">
            <input ref={(input) => this.contact = input} type="text" className="slds-input" disabled/>
          </div>
        </div>
        <button type="button" className="slds-button slds-button--neutral">Cancel</button>
        <button type="submit" className="slds-button slds-button--brand">Create</button>
      </form>
    );
  }

Hilfsfunktion

import axios from 'axios'

export function getProjectName() {

  return new Promise(function(resolve,reject){

  //gets the record id from the current url
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");

    for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
    }

    return(false);
  }

  //used to access the rest api on my system
  const REST_API_URL = restApiUrl;
  const API_TOKEN = {
    headers: { "Authorization" : "Bearer " + sessionId,
              "Content-Type" : "application/json"
             }
  }
  const OPPORTUNITY_QUERY = "SELECT+Id,Name+FROM+OPPORTUNITY+WHERE+Id="

  //get projectId
  const id = getQueryVariable('projectId');

  //make requst for record name
  var request = axios.get(`${REST_API_URL}query/?q=${OPPORTUNITY_QUERY}'${id}'`,
     API_TOKEN
   ).then(function (response){
      return resolve(response.data.records[0].Name);
   })
  })
}
Sie drucken sich das promise-Objekt anstelle der aufgelösten Wert, aber es sei denn, Sie überspringen die Bilder und der post-code statt dessen ist es schwer zu sagen, was du falsch machst.
erledigt, sorry
wie kann ich drucken Sie das gelöst Wert?
getProjectName() gibt ein Versprechen. Wenn dieses Versprechen löst einen Wert, es sollte möglich sein, führen Sie einfach getProjectName().then((value) => { console.log(value); });, aber es wäre besser, wenn Sie enthalten den code für die getProjectName Funktion.
aber wie übertrage ich das gelöst Wert in meinem input in meinem jsx?

InformationsquelleAutor Tyler Zika | 2017-02-17

  1. 8

    Beim Umgang mit einem Wert, der die render-Methode verwenden werden, und wird auch abgerufen asynchron sollten Sie mit diesem Wert existieren in den Zustand der Komponente und nutzen Sie die componentDidMount lifecycle-Methode, um den Wert abzurufen. 

    class SomeComponent extends React.component {
  constructor() {
    super();

    this.state = {
      projectName: ''
    }
  }

  componentDidMount() {
    //fetch the project name, once it retrieves resolve the promsie and update the state. 
    this.getProjectName().then(result => this.setState({
      projectName: result
    }))
  }

  getProjectName() {
    //replace with whatever your api logic is.
    return api.call.something()
  }


  render() {

    return (
      <input type="text" defaultValue={projectName}>
    )
  }
 }

    wollen Sie nicht rufen Sie die Funktion auf und lösen Sie die Versprechen, die in der render-Methode, weil die Methode render sollte eine Reine Funktion auf Basis von state und Requisiten. Dies ist ein Basis-Beispiel, aber sollte Ihnen eine Vorstellung davon, was sich ändern muss. Nur müssen projectName als state-variable, und machen, und lösen Sie die Versprechen, die in der componentDidMount auf den ersten machen, es wird gleich eine leere Zeichenfolge ist, sobald es wieder geht wird es update, was die api zurück.

    Wenn Sie nicht wollen, zu zeigen, die Eingabe, bis der api-Aufruf löst dann Sie können fügen Sie einfach zusätzliche Prüfungen, um zu sehen, wenn this.state.projectName gleich alles, was und wenn ja machen die Eingabe.

    InformationsquelleAutor finalfreq

  2. 1

    Sich das problem mit dem code ist dieser Teil.

    <input ref={(input) => this.related = input} type="text" className="slds-input" defaultValue={getProjectName()} disabled/>.

    Die Funktion getProjectName gibt ein Versprechen, nicht aufgelösten Wert des Versprechens.

    Sollten Sie das Rendern der Benutzeroberfläche mit render() aus this.state und this.props, und wenn Sie Daten haben, die geladen werden muss, asynchron, können Sie die Daten zuzuordnen, d.h. this.props.relatedTo mit der componentDidMount() Funktion, etwas in der Linie der

    componentDidMount() {
    var self = this;

    getProjectName()
        .then(val => {
            self.setState({relatedTo: val});
        });
}

    Werfen Sie einen Blick auf die Staats-und lifecycle-Dokumentation.

    InformationsquelleAutor Daniel B

Schreibe einen Kommentar