コンポーネントにヘルパー関数があります。 console.log(helperFunction())
itすると、コンソールでこれを取得します。
値の入力フィールドにヘルパー関数を追加しようとすると。これが表示されます。
入力で[[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メソッドはstateとpropsに基づいた純粋な関数である必要があるため、関数を呼び出してrenderメソッドのプロミスを解決したくありません。これは基本的な例ですが、何を変更する必要があるかについてのアイデアを提供する必要があります。状態変数としてprojectName
を設定し、最初のレンダリングでcomponentDidMount
のプロミスを作成して解決するだけで、空の文字列に等しくなります。戻り値。
API呼び出しが解決するまで入力を表示したくない場合は、追加のチェックを追加してthis.state.projectName
は何でもあり、そうであれば入力をレンダリングします。
コードの問題はこの部分です。
<input ref={(input) => this.related = input} type="text" className="slds-input" defaultValue={getProjectName()} disabled/>
。
関数getProjectName
は、そのプロミスの解決された値ではなく、プロミスを返します。
_this.state
_および_this.props
_のrender()
を使用してUIをレンダリングする必要があります。非同期にロードする必要があるデータがある場合は、データを_this.props.relatedTo
_に割り当てることができますcomponentDidMount()
関数を使用して、行の何か
_componentDidMount() {
var self = this;
getProjectName()
.then(val => {
self.setState({relatedTo: val});
});
}
_
状態とライフサイクルのドキュメント をご覧ください。