obtenir la promesse de la valeur de réagir composant

J'ai une fonction d'aide dans mon composant. Quand je console.log(helperFunction()), je reçois ce dans la console.

obtenir la promesse de la valeur de réagir composant

Lorsque j'essaie d'ajouter la fonction d'assistance à un champ de saisie pour sa valeur. Je reçois ce qui se montre.

obtenir la promesse de la valeur de réagir composant

Comment puis-je obtenir le [[PromiseValue]] dans mon entrée?

  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>
);
}

Fonction D'Assistance

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);
})
})
}
Vous avez l'impression de l'objet promise au lieu de la valeur résolue, mais à moins que vous ignorez les images et après un peu de code au lieu de cela, il sera difficile de dire ce que vous faites mal.
fait, désolé
comment imprimer la valeur résolue?
getProjectName() retourne une promesse. Si cette promesse résout une valeur, il devrait être possible de l'exécuter à getProjectName().then((value) => { console.log(value); });, mais il serait mieux si vous avez inclus le code de la getProjectName fonction.
mais comment faire pour que la valeur résolue dans mon input dans mon jsx?

OriginalL'auteur Tyler Zika | 2017-02-17

  1. 8

    Lorsque vous traitez avec une valeur que la méthode render sera à l'aide et est également extraite de manière asynchrone, vous devriez être avoir que la valeur existe dans l'état du composant et de profiter de la componentDidMount cycle de vie de la méthode pour récupérer la valeur. 

    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}>
)
}
}

    vous ne voulez pas faire appel à la fonction et à résoudre la promesse dans la méthode render parce que la méthode de rendu doit être une pure fonction sur la base de l'état et des accessoires. C'est un exemple de base, mais devrait vous donner une idée de ce qui doit changer. Juste besoin de mettre en projectName comme une variable d'état et de passer et de résoudre la même promesse, dans le componentDidMount sur le premier rendu, il sera égal à une chaîne vide, une fois qu'elle revient, elle sera mise à jour à tout ce que l'api retourne.

    Si vous ne souhaitez pas afficher l'entrée jusqu'à l'appel d'api résout alors vous pouvez simplement ajouter des contrôles pour voir si this.state.projectName égale n'importe quoi et si oui, le rendu de l'entrée.

    OriginalL'auteur finalfreq

  2. 1

    Le problème avec votre code est cette partie.

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

    La fonction getProjectName retourne une promesse, pas le résolu valeur de cette promesse.

    Vous devez rendre votre INTERFACE utilisateur avec render() de this.state et this.props, et si vous avez des données qui doit être chargé de manière asynchrone, vous pouvez l'assigner à savoir this.props.relatedTo à l'aide de la componentDidMount() fonction, quelque chose dans la ligne de

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

    Prendre un coup d'oeil à l'état et le cycle de vie de la documentation.

    OriginalL'auteur Daniel B