Question

所以我刚刚开始反应，我正在浏览一个关于“处理反应中的动态内容”的视频。

所以我们的主要目标是在点击按钮时使用地图功能显示三个方框。

我们最初创建了像这样的状态对象

state = {
    person: [
    {name: "Rohit", age: 24},
    {name: "Hariom", age: 23},
    {name: "Vaibhav", age: 58}
  ],
  someOtherState: "Untouched state",
  showPerson: false
}

然后我们为条件和映射尝试了类似的东西

 render() {

    let person = null;

    if (this.state.showPerson) {
      person = (
        <div>
          {this.state.person.map(Person => {
            return <Person
            name={Person.name}
            age={Person.age} />
          })}
          </div>
     );
    }

其次是

return (

  <div className="App">
        <h1> Hi I am react App</h1>
        <button onClick={this.togglerPersonHandler}>Button</button>
        {person}
    </div>
      );
   }
}

现在，当我点击一个按钮时，它会抛出以下错误（三次）

index.js:2178 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at App.js:54.
    in App (at index.js:7)

和

index.js:2178 The above error occurred in the <div> component:
    in div (at App.js:52)
    in div (at App.js:63)
    in App (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.

我在这里做错了什么？（togglerPersonHandler只是改变了someOtherState的值）。请让我知道我的错误并解决。

Answer 1

问题出在这一部分：

-
  :id: 1
  :label: Player
  :badge: NIL
-
  :id: 2
  :label: Bronze Helper
  :badge: STF_HELP_BRZ
-
  :id: 3
  :label: Silver Helper
  :badge: STF_HELP_SLV

别忘了，我们写的是 jsx ，这是语法糖，它会转换成：

{this.state.person.map(Person => { return <Person .....})

Type应该是html标签的字符串，或者是反应组件。

因此，在您的情况下，您使用React.createElement(type, props, children)作为箭头函数的参数意味着它的值将是Person数组的每个对象。在您渲染this.state.persons的同时，Person是一个对象，而不是一个有效的类型，这就是您收到错误的原因：

React.createElement：type无效

解决方案是，如果（Person是反应组件，您在某处定义），请使用其他名称：

<Person />

还为每个元素分配一个唯一键。

Answer 2

我同意@Mayank Shukla。虽然这样做的更简单，更简单的方法是

    render() {
    let person = this.state.person.map(per => <Person key={per.name} name={per.name} age={per.age}/>);

    return (  <div className="App">
        <h1> Hi I am react App</h1>
        <button onClick={this.togglerPersonHandler}>Button</button>
        {this.state.showPerson ? person : ''}
    </div>);
}

}

React：警告：React.createElement：type无效

2 个答案: