[英]get promise value in react component
我的組件中有一個輔助函數。 當我在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);
})
})
}
處理render方法將使用的值並且也是異步檢索時,您應該在組件的狀態中存在該值,並利用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}>
)
}
}
你不想在render方法中調用函數並解析promise,因為render方法應該是一個基於state和props的純函數。 這是一個基本示例,但應該讓您了解需要更改的內容。 只需要將projectName
設置為狀態變量,並在第一次渲染時在componentDidMount
創建並解析它將等於空字符串,一旦它返回它將更新為api返回的任何內容。
如果您不希望在api調用解析之前顯示輸入,那么您可以添加其他檢查以查看this.state.projectName
等於任何內容,如果是,則呈現輸入。
您的代碼存在的問題是這一部分。
<input ref={(input) => this.related = input} type="text" className="slds-input" defaultValue={getProjectName()} disabled/>
。
函數getProjectName
返回一個promise,而不是該promise的解析值。
您應該使用this.state
和this.props
render()
呈現UI,如果您有異步加載的數據,則可以使用componentDidMount()
函數將數據分配給this.props.relatedTo
,在線
componentDidMount() {
var self = this;
getProjectName()
.then(val => {
self.setState({relatedTo: val});
});
}
查看狀態和生命周期文檔 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.