Question

试图搜索答案，但未找到匹配的答案。我的简单React应用程序有一个问题（contactForm +联系人列表）。应用程序本地未渲染，我收到了两个警报：

“ react.js：20478警告：道具类型失败：提供给contact的类型string的道具ContactForm无效，预期object。在ContactForm中（由App创建）在应用中”

和

react.js：20478警告：道具类型失败：提供给items的类型string的道具Contacts无效，预期array。在联系人中（由App创建）在应用程序中

有趣的是，警报仅在本地显示（我使用http服务器运行应用程序）。当我在GitHub上上传代码并通过GitHub Pages运行时（存储库中的链接）-应用正在呈现，并且没有警报发生。有人可以向我解释吗？

文件结构-script.js（仅渲染应用程序）和组件：应用程序，联系人（单个联系人），联系人（联系人列表）和ContactForm。

应用程序：

var contacts = [
    {
      id: 1,
      firstName: 'Jan',
      lastName: 'Nowak',
      email: 'jan.nowak@example.com',
    }
    ...
  ];

  var contactForm = {
    firstName: '',
    lastName: '',
    email: ''
  };

  var App = React.createClass({
    render: function() {
      return (
        <div className='app'>
          <ContactForm contact={contactForm}/>
          <Contacts items={contacts}/>
        </div>
      );
    }
  });

联系方式：

var Contact = React.createClass({
    propTypes: {
      item: React.PropTypes.object.isRequired,
    },

    render: function() {
      return (
        <div className={'contactItem col-lg-6 col-md-6 col-sm-12'}>
            <div className={'contactImg col-lg-4 col-md-4 col-sm-4'}>
                <img className={'contactImage'} src={'http://icons.veryicon.com/png/System/gCons/contacts.png'}/>
            </div>
            <div className={'contactItem col-lg-6 col-md-6 col-sm-12'}>
                <p className={'contactLabel'}>Imię: {this.props.item.firstName}</p>
                <p className={'contactLabel'}>Nazwisko: {this.props.item.lastName}</p>
                <a className={'contactEmail'} href={'mailto:'+this.props.item.email}>{this.props.item.email}</a>
            </div>
        </div>
        )
    },
  });

联系人：

var Contacts = React.createClass({
    propTypes: {
      items: React.PropTypes.array.isRequired,
    },

    render: function() {
      var contacts = this.props.items.map(function(contact) {
          return <Contact item={contact} key={contact.id}/>
      });

      return <ul className={'contactList'}>{contacts}</ul>
    }
  });

ContactForm：

var ContactForm = React.createClass({
    propTypes: {
      contact: React.PropTypes.object.isRequired
    },

    render: function() {
      return (
        <form className={'contactForm'}>
          <input type={'text'} placeholder={'Imię'} value={this.props.contact.firstName}/>
          <input type={'text'} placeholder={'Nazwisko'} value={this.props.contact.lastName}/>
          <input type={'email'} placeholder={'E-mail'} value={this.props.contact.email}/>
          <button type={'submit'}>Dodaj kontakt</button>
        </form>
        )
    },
  })

链接到完整代码： https://github.com/galdranorn/react-exercises

Answer 1

@galdranon：我签出了您的代码，没有收到任何错误。

Answer 2

问题已解决：代码还可以，但是我遇到了现金问题。清除浏览器/ ctrl + F5习惯可以解决问题。

字符串类型无效的道具x －预期的对象object +字符串类型y －预期数组

2 个答案: