类型错误：尝试 .filter() 时“无法读取未定义的属性 'toLowerCase'”

Question

所以我一直在尝试解决这个错误，但我一直空白。我尝试用 subreddit、key、link、type 和 body 替换 .filter() 中的标题，它们都可以正常工作而不会引发错误，只有标题给了我错误。在故障排除期间，我还放置了该 console.log 以查看是否实际存储了某些内容，并将标题打印到控制台，就像它应该有的那样，但 save.title 在 .filter 中仍未定义。我也尝试了没有 toLowerCase() 的 save.title.includes 无济于事。

有问题的代码

  renderPostTitles = () => {
    const importantValues = this.props.totalUserSaves.map((saved) => {
      return { 
        subreddit: saved.data.subreddit, 
        title: saved.data.title, 
        key: saved.data.id, 
        link: `https://www.reddit.com${saved.data.permalink}`,
        type: saved.kind,
        body: saved.data.body
      }
    })

    console.log(importantValues[0].title)
    const threadsArray_searched = importantValues.filter(saved => saved.title.toLowerCase().includes(this.props.searchQuery.toLowerCase()) )

更多组件：

import React from 'react';
import { connect } from 'react-redux';

class DisplaySaves extends React.Component {
  renderPostTitles = () => {
    const importantValues = this.props.totalUserSaves.map((saved) => {
      return { 
        subreddit: saved.data.subreddit, 
        title: saved.data.title, 
        key: saved.data.id, 
        link: `https://www.reddit.com${saved.data.permalink}`,
        type: saved.kind,
        body: saved.data.body
      }
    })

    const threadsArray_searched = importantValues.filter(saved => saved.title.toLowerCase().includes(this.props.searchQuery.toLowerCase()) )

    return threadsArray_searched.map((saved, i) => {
     return (
        <div key={saved.key}>
          <div> {i+1}. </div>
          <div> r/{saved.subreddit}: </div>
          <p> <a href={saved.link} target="_blank" rel="noopener noreferrer"> {saved.title} </a> </p>
        </div>
        )
    })
  }

  render () {
    return (
      <div>
        <div>{this.renderPostTitles()}</div>
      </div>
      ) 
  }
}

const mapStateToProps = state => {
  console.log(state)
  return { 
    totalUserSaves: state.userData.totalUserSaves,
    searchQuery: state.userData.searchQuery
   }
}

export default connect(mapStateToProps)(DisplaySaves);

Answer 1

确保标题在所有情况下都是一个字符串（未定义可能会潜入其中一个元素），您可以使用默认或字符串构造函数：

return {
  title: saved.data.title || '', 

或

return {
  title: String(saved.data.title),