รับมูลค่าสัญญาในองค์ประกอบการตอบสนอง

ฉันมีฟังก์ชันตัวช่วยในส่วนประกอบของฉัน เมื่อฉัน 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 ส่งคืนสัญญา ไม่ใช่ค่าที่ได้รับการแก้ไขของสัญญานั้น

คุณควรเรนเดอร์ UI ของคุณด้วย 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