javascript - prop 返回 null

Question

考虑到 prop 字段 ，我不确定为什么表单组件末尾的这个 prop this.props.event.Who.Name 在页面加载时返回错误位置 为null。我正在从 REST API 导入数据，一些记录字段为 null。有办法解决这个问题吗？

错误

Uncaught (in promise) TypeError: Cannot read property 'Name' of null at Update.render (webpack:///./src/components/Event/Update.js?:349:116)

错误前的 Prop 控制台。

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;

Answer 1

原因是，你正在从 api 获取数据，所以你需要保持 rendering 直到你得到数据，因为直到你没有得到数据, this.props.event.any_key 将是 undefined, 所以你需要检查 Object.keys(this.props.event) > 0 ? 它会起作用，使用这个:

render() {
    Object.keys(this.props.event) > 0?
      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>
    :
    return <div>fetching data...</div>

建议:由于您的props 包含大量数据，因此您可以一直使用this.props.event 而不是存储this.props.event 的值在一个单独的变量中，这将使代码更小且可读。像这样:

render(){
   let event = this.props.event;

现在直接使用 event 而不是 this.props.event。