dapatkan nilai janji di komponen reaksi

Saya memiliki fungsi pembantu di komponen saya. Saat saya console.log(helperFunction()), saya mendapatkannya di konsol.

masukkan deskripsi gambar di sini

Ketika saya mencoba menambahkan fungsi pembantu ke kolom input untuk nilainya. Saya mendapatkan ini muncul.

masukkan deskripsi gambar di sini

Bagaimana cara mendapatkan [[PromiseValue]] di masukan saya?

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

Fungsi Pembantu

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 sumber
comment
Anda mencetak objek janji alih-alih nilai yang diselesaikan, tetapi kecuali Anda melewatkan gambar dan memposting beberapa kode, akan sulit untuk mengatakan kesalahan apa yang Anda lakukan.   -  person Daniel B    schedule 18.02.2017
comment
@DanielB selesai, maaf   -  person Tyler Zika    schedule 18.02.2017
comment
@DanielB bagaimana cara mencetak nilai yang diselesaikan?   -  person Tyler Zika    schedule 18.02.2017
comment
getProjectName() mengembalikan janji. Jika janji tersebut menyelesaikan suatu nilai, seharusnya getProjectName().then((value) => { console.log(value); }); dapat dijalankan saja, namun akan lebih baik jika Anda menyertakan kode untuk fungsi getProjectName.   -  person Daniel B    schedule 18.02.2017
comment
tapi bagaimana cara memasukkan nilai terselesaikan itu di input saya di jsx saya?   -  person Tyler Zika    schedule 18.02.2017
comment
@DanielB sudah ditambahkan   -  person Tyler Zika    schedule 18.02.2017


Jawaban (2)


Saat menangani nilai yang akan digunakan oleh metode render dan juga diambil secara asinkron, Anda harus memiliki nilai tersebut dalam status komponen dan memanfaatkan metode siklus hidup componentDidMount untuk mengambil nilai.

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

Anda tidak ingin memanggil fungsi dan menyelesaikan janji dalam metode render karena metode render harus berupa fungsi murni berdasarkan status dan props. Ini adalah contoh dasar tetapi akan memberi Anda gambaran tentang apa yang perlu diubah. Hanya perlu menetapkan projectName sebagai variabel status dan membuat serta menyelesaikan janji di componentDidMount pada render pertama, itu akan sama dengan string kosong, setelah kembali, itu akan diperbarui ke apa pun yang dikembalikan api.

Jika Anda tidak ingin menampilkan masukan hingga panggilan api teratasi, Anda cukup menambahkan pemeriksaan tambahan untuk melihat apakah this.state.projectName sama dengan apa pun dan jika demikian, render masukannya.

person finalfreq    schedule 17.02.2017

Masalah dengan kode Anda adalah bagian ini.

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

Fungsi getProjectName mengembalikan sebuah janji, bukan nilai penyelesaian dari janji tersebut.

Anda harus merender UI Anda dengan render() dari this.state dan this.props, dan jika Anda memiliki data yang harus dimuat secara asinkron, Anda dapat menetapkan data tersebut ke yaitu this.props.relatedTo menggunakan fungsi componentDidMount(), sesuatu di baris

componentDidMount() {
    var self = this;

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

Lihat dokumentasi status dan siklus proses.

person Daniel B    schedule 17.02.2017
comment
Kamu luar biasa! Terima kasih! - person Darius; 30.12.2020