1
왜 소품 필드 Location이 null인지 고려하면 페이지가로드 될 때 내 양식 구성 요소 끝에있는이 소품 this.props.event.Who.Name이 오류를 반환하는지 잘 모르겠습니다. REST API에서 데이터를 가져오고 일부 레코드 필드는 null입니다. 이 문제를 해결할 방법이 있습니까?소품이 null을 반환합니다
오류 전에 소품의 오류
Uncaught (in promise) TypeError: Cannot read property 'Name' of null at Update.render (webpack:///./src/components/Event/Update.js?:349:116)
콘솔. 
import React from 'react';
class Update extends React.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value,
});
}
onSubmit(e) {
e.preventDefault();
console.log('event is being submitted for update.');
console.log(this.props.event);
}
render() {
console.log(this.props.event);
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.assignedName = input} type="text" className="slds-input" value={this.props.event.Owner.Name} disabled/>
<input ref={(input) => this.assignedId = input} type="hidden" className="slds-input" value={this.props.event.Owner.Id} 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.relatedName = input} type="text" className="slds-input" value={this.props.event.What.Name} disabled/>
<input ref={(input) => this.relatedId = input} type="hidden" className="slds-input" value={this.props.event.What.Id} 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" value={this.props.event.Subject}/>
</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" value={this.props.event.Location}/>
</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.props.event.StartDateTime }/>
</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.props.event.EndDateTime } />
</div>
</div>
<div className="slds-form-element">
<label className="slds-form-element__label" htmlFor="input4">Contact</label>
<div className="slds-form-element__control">
<section className="slds-clearfix">
<input ref={(input) => this.contactName = input} className="slds-input" style={{maxWidth: '92%'}} disabled value={ this.props.event.Who.Name } />
<input ref={(input) => this.contactId = input} type="hidden" value={ this.props.event.Who.Id }/>
<button type="button" onClick={this.toggleModal} className="slds-button slds-button--icon-border slds-float--right" aria-live="assertive" style={{display: 'inline'}}>
<svg className="slds-button__icon" aria-hidden="true">
<use xlinkHref={searchIcon}></use>
</svg>
</button>
</section>
</div>
</div>
<button type="button" className="slds-button slds-button--neutral">Cancel</button>
<button type="submit" className="slds-button slds-button--brand">Update</button>
</form>
);
}
}
export default Update;
console.log에서 오류가 표시됩니다. this.contactName = input} className = "slds-input"style = {{maxWidth : '92 % '}}에 {this.props.event.Who.Name} 비활성화 된 값 = {this.props.event.Who.Name} /> 및 누가 null인지. Who.name을 수행하기 전에 Who 값을 확인할 수 있습니다. – noveyak
예, 위치가 null이고 오류가 발생하지 않습니다. –
null을 렌더링하는 ok, null을 역 참조 할 수 없습니다. 대신 this.props.event.Who && this.props.event.Who.Name을 수행 할 수 있습니다. 이 방법은 누가 정의되지 않았을 때 아무 일도하지 않지만 정의 된 경우 이름을 렌더링합니다. – noveyak