javascript - 未捕获的不变违规 : Objects are not valid as a React child. 如果您打算渲染子集合，请改用数组

Question

我正在尝试根据输入值过滤出学生列表。但我收到一条错误消息“未捕获的不变违规:对象作为 React 子项无效(发现:带有键 {city、company、email、firstName、grades、id、lastName、pic、skill} 的对象)。如果如果你想渲染一组子元素，请使用数组来代替。”我尝试使用“Object.assign([], this.state.filteredStudents)”它仍然不起作用。我正在尝试显示包含在数组中但在单独对象中的信息。

<div className="container">
          <input 
            id="search"
            name="search"
            onChange={this.handleInput} 
            placeholder="Search by name" 
            style={{width: '100%', border: '0', padding: '15px 0 7px 10px'}} 
          />
          <hr />
          {/* {allStudents} */}
          {this.state.search === "" ? allStudents : this.state.filteredStudents}
        </div>

Answer 1

这里发生的是你有一个带有属性的对象。

您可以做一些事情。

您可以显示您想要的属性

您可以渲染它的一些 Prop ，而不是尝试渲染完整的组件

{this.state.search === "" ? allStudents : this.state.filteredStudents.email} // render the email string

您还可以循环遍历对象的值 ( Object.values ) 并渲染每个属性

{this.state.search === "" ? 
    allStudents : 
    this.state.filteredStudents.map(obj => Object.values(obj)
          .map(propValue => <p>{propValue}</p>))  // render the value of each property
}

但是请更清楚地说明您的问题、您想要如何显示、您想要显示什么以及您的组件中有什么。

请记住，this.state.filteredStudents 是一个对象，您无法渲染对象。