Question

我想在3个单词（“-”之后）中切一个字符串（它在对象中），我的应用程序是使用reactJS开发的，如何解决此问题？我想返回“-”之后的行。
注意：数据已定义并显示，但我想在“-”之后剪切字符串（名称）我想显示这样的频道：
tst ab
deb
azerty bla

问题：

TypeError: Cannot read property 'split' of undefined

object：

email: "tst@gmail.com"
idclient: 74
name: "tst ab - deb - azerty bla"
poste: "PDG"
soct: "entrp"
phone: "1111111"

mypage前端：

....
     <tr>
         <td><i class="fas fa-user"></i> Name</td>
         <td> {this.state.clientById.name.split(' - ')} </td>
     </tr>

Answer 1

错误可能是在初始渲染期间出现的，其中this.state.clientById可能没有name属性。如果您的应用程序中允许使用optional chaining，则可以使用以下代码段：

<td> {this.state?.clientById?.name?.split(' - ').join('\n')} </td>

没有可选链接的解决方案，以防万一：

<td> { this.state.clientById
       && this.state.clientById.name
       && this.state.clientById.name.split(' - ').join('\n')
     }
</td>

Answer 2

name.split（'-'）将返回一个数组，因此您需要将其存储在变量中并对其进行迭代

Answer 3

由于“ clientById”中的属性“ name”为空或为空，因此出现此问题。如果我们尝试对未定义的对象调用split，则会出错。

尝试此操作以获得所需的输出。它将在所有浏览器中运行。

 <td> {this.state.clientById && this.state.clientById.name && this.state.clientById.name.split(' - ').map(item => {
                   return (<div> {item} </div>)
       } </td>

Answer 4

您的组件可能在状态初始化之前就已渲染，并且此时this.state.clientById.name可能仍未定义，请在执行split之前像这样尝试添加检查。

 <td> {
          this.state.clientById && 
          this.state.clientById.name && 
          this.state.clientById.name.split(' - ')
      } 
</td>

这将确保在尝试分割this.state.clientById.name之前将其定义。

TypeError：无法读取reactJS中未定义的属性'split'

4 个答案: