首页 > web前端 > js教程 > 在'render”方法中映射数组时,为什么会收到'Invalid React Child”错误?

在'render”方法中映射数组时,为什么会收到'Invalid React Child”错误?

Patricia Arquette
发布: 2024-11-06 15:31:03
原创
594 人浏览过

Why am I getting the

React Error: Invalid React Child

当 render 方法尝试渲染无效的 React child 时,会发生此错误,返回时可能会发生这种情况数组或对象而不是有效的 React 元素。

在您的情况下,错误是由于直接在地图函数中引用绑定方法 this.onItemClick.bind(this, item) 引起的。要修复此问题,您应该使用箭头函数:

<code class="javascript">render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={(e) => this.onItemClick(e, item)} key={item}>{item}</li>);
    });

    // ...
}</code>
登录后复制

箭头函数创建一个新作用域,其中 this 值绑定到组件实例,允许您访问 onItemClick 函数。

理解错误消息

错误消息包含以下信息:

  • 对象作为 React 子对象无效: 表示无效子对象是一个对象。
  • dispatchConfig、dispatchMarker、nativeEvent、...: 列出事件对象的属性,该属性作为第一个参数传递给onClick handler。
  • 检查Welcome的render方法:指向发生错误的组件(假设该组件名为“Welcome”)。

附加说明

  • 绑定箭头函数:箭头函数没有自己的 this 绑定,因此它们会自动绑定到定义它们的作用域。
  • 更新状态:您仍然可以通过使用带有回调函数的 setState 方法在箭头函数中更新组件的状态:
<code class="javascript">onClick={(e) => this.setState((prevState) => ({ lang: item }))}</code>
登录后复制

以上是在'render”方法中映射数组时,为什么会收到'Invalid React Child”错误?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板