类型为`string`的prop`x`无效 - 期望``对象`'y'类型`string`

试图寻找答案，但没有找到匹配的答案 . 我的简单React应用程序（contactForm联系人列表）有问题 . 本地应用程序不呈现，我收到两个警报：

“react.js：20478警告：失败的道具类型：提供给ContactForm的类型字符串的无效道具联系人，预期对象 . 在App中的ContactForm（由App创建）”

和

react.js：20478警告：支柱类型失败：提供给Contacts的预期数组的类型字符串的无效道具项目 . 在应用程序中的联系人（由App创建）中

有趣的是，警报显示 only locally （我用http服务器运行应用程序） . 当我在GitHub上传代码并通过GitHub页面（存储库中的链接）运行时 - 应用程序正在呈现，并且没有任何警报发生 . 有人可以向我解释一下吗？

文件结构 - script.js（仅渲染App）和组件：App，Contact（单个联系人），Contacts（联系人列表）和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>
    }
  });

联系表：

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

2 回答

0

@galdranon：我检查了你的代码并没有收到任何错误 .

回复于 2024-05-20T13:57:41+08:00
0

问题解决了：代码还可以，但我有问题 . 清理浏览器/ ctrl F5习惯可以解决问题 .

回复于 2024-05-20T13:57:41+08:00

类型为`string`的prop`x`无效 - 期望``对象`'y'类型`string` - 期望'数组'

2 回答

相关问题