получить значение обещания в компоненте реакции

Question

У меня есть вспомогательная функция в моем компоненте. Когда я console.log(helperFunction()), я получаю это в консоли.

Когда я пытаюсь добавить вспомогательную функцию в поле ввода для его значения. Я получаю это.

Как получить [[PromiseValue]] в моем входе?

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

Helper Функция

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

Answer 1

Когда имеют дело со значением, рендер метод будет использовать и также извлекается асинхронно вы должны быть с этим значением существует в состоянии компонента и воспользоваться метод жизненного цикла componentDidMount для извлечения значения.

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

вы не хотите, чтобы вызвать функцию и разрешить обещание в методе визуализации, так как метод визуализации должен быть чистой функцией, основанный на состоянии и реквизите. Это базовый пример, но должен дать вам представление о том, что нужно изменить. Просто нужно установить projectName как переменную состояния и сделать и разрешить обещание в componentDidMount, при первом рендеринге он будет равен пустой строке, как только он вернется, он обновится до того, что возвращается api.

Если вы не хотите показывать ввод до тех пор, пока вызов api не будет разрешен, вы можете просто добавить дополнительные проверки, чтобы увидеть, соответствует ли this.state.projectName что угодно, и если это сделать визуализацию ввода.

Answer 2

Проблема с вашим кодом - эта часть.

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

Функция getProjectName возвращает обещание, а не разрешенное значение этого обещания.

Вы должны сделать вашу UI с render() от this.state и this.props, и если у вас есть данные, которые должны быть загружены асинхронно, вы можете присвоить данные, т.е. this.props.relatedTo с помощью функции componentDidMount(), что-то в строке

componentDidMount() { 
    var self = this; 

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

Посмотрите на the state and lifecycle documentation.