1
Я не уверен, почему эта прорезь this.props.event.Who.Name в конце моего компонента формы возвращает ошибку, когда страница загружается, учитывая поле prop Location is null. Я импортирую данные из REST API, а некоторые из полей записи - null. Есть ли способ обойти это?prop возвращает 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.props.event.Who.Name} в this.contactName = input} className = "slds-input" style = {{maxWidth: '92% '}} disabled value = {this.props.event.Who.Name} /> и Who is null. Вы можете проверить, есть ли значение для Who who who.name. – noveyak
Да, но место имеет значение null, и это не дает мне ошибку. –
Его нормально отображать нуль, его нехорошо разыменовать нуль. Вместо этого вы можете сделать this.props.event.Who && this.props.event.Who.Name. Таким образом, он ничего не делает, когда Кто не определен, но будет отображать Имя, если определено – noveyak