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

У меня есть вспомогательная функция в моем компоненте. Когда я 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>
    );
  }

Вспомогательная функция

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

person Tyler Zika    schedule 17.02.2017    source источник
comment
Вы печатаете объект обещания вместо разрешенного значения, но если вы не пропустите изображения и не опубликуете код, будет трудно сказать, что вы делаете неправильно.   -  person Daniel B    schedule 18.02.2017
comment
@DanielB сделал, извини   -  person Tyler Zika    schedule 18.02.2017
comment
@DanielB, как мне напечатать разрешенное значение?   -  person Tyler Zika    schedule 18.02.2017
comment
getProjectName() возвращает обещание. Если это промис разрешает значение, должна быть возможность просто запустить getProjectName().then((value) => { console.log(value); });, но было бы лучше, если бы вы включили код для функции getProjectName.   -  person Daniel B    schedule 18.02.2017
comment
но как мне поместить это разрешенное значение в мой input в моем jsx?   -  person Tyler Zika    schedule 18.02.2017
comment
@DanielB добавлено   -  person Tyler Zika    schedule 18.02.2017


Ответы (2)


При работе со значением, которое будет использовать метод рендеринга и которое также извлекается асинхронно, вы должны иметь это значение в состоянии компонента и использовать метод жизненного цикла 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 чему-либо, и если да, отобразить ввод.

person finalfreq    schedule 17.02.2017

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

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

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

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

componentDidMount() {
    var self = this;

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

Взгляните на документацию о состоянии и жизненном цикле.

person Daniel B    schedule 17.02.2017
comment
Ты великолепен! Благодарю вас! - person Darius; 30.12.2020