Question

我正在使用reactjs中的搜索过滤器，当前在第一次或第二次尝试中，当用户输入值时，它可以正常工作，但是当用户在第三次尝试中输入一些文本时，它会生成错误const styles = StyleSheet.create({ bannerAd: { ...Platform.select<ViewStyle>({ ios: { transform: [ { translateY: -20, }, ], }, }), }, })。我将提供逻辑代码，可能有人可以帮助我解决该问题。我是ReactJS的新手，没有足够的知识来解决这个问题。

代码

TypeError: Cannot read property 'toLowerCase' of null

Answer 1

以防万一您未设置对象值：

(item.companyName||'').toLowerCase().indexOf(keyword)

Answer 2

您遇到的问题是设置数据时将属性设置为null。因此，当您检查它时，会引发错误。

您可以使代码变得复杂，并在执行之前检查它是否真实。

(item.companyName && item.companyName.toLowerCase().indexOf(keyword) > -1) ||
(item.primaryPhone && item.primaryPhone.toLowerCase().indexOf(keyword) > -1) ||

我个人不会这样做，而会使用some和includes。

定义要检查的字段数组

const fields = ['companyName','primaryPhone','emailAddress','venueCode','website','description']

在您的过滤器代码中，使用一些并循环遍历，看看它们是否真实且匹配

let filtered = keyword.length
  ? this.state.data.filter(item =>
      fields.some(prop =>
        item[prop] && item[prop].toLowerCase().includes(keyword)
      )
    )
  : []

代码的下一个问题是这个

if(this.state.filtered.length>0 || !this.state.filtered.length)

第一个语句说是否大于零，第二个为零。所以不确定您会发生什么。

下一个问题是您正在阅读this.state.filtered。问题是您在this.setState(....)的上方进行了设置。问题是setState是异步的，因此您要检查的值不会在那里。您有变量filtered，请使用它。

if (!filtered.length)

Answer 3

您需要在调用toLowerCase之前添加检查，因为该检查仅在字符串上可用

let a  = ''
let b = undefined
let c = [1,2,3]
let d = null
let e = 'HELLO'

typeof a === 'string' && a && console.log(a.toLowerCase())
typeof b === 'string' && b && console.log(b.toLowerCase())
typeof c === 'string' && c && console.log( c.toLowerCase())
typeof d === 'string' && d && console.log( d.toLowerCase())
typeof e === 'string' && e && console.log( e.toLowerCase())

ReactJS错误：TypeError：无法读取null的属性“ toLowerCase”

3 个答案: