Question

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

错误

Uncaught（在promise中）TypeError：无法读取null的属性“Name” 在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;

Answer 1

原因是，您从api获取数据，因此您需要按住rendering直到获得数据，因为在您没有获取数据之前，{{1将是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。

prop返回null

1 个答案: