Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase') React - Redux

Question

我在尝试搜索时遇到以下错误。我正在使用 redux 来保持我的状态。每次我离开以下页面并返回时，我都会收到错误消息。

“未捕获的类型错误：无法读取未定义的属性（读取 'toLowerCase'）”

以下是我的保险内容

 import React, { Component } from 'react';
import { connect } from "react-redux";
import { fetchAllInsurances } from '../../actions/insurance.action';
import { Link } from 'react-router-dom';
import Card from '../Card';
import SearchBar from '../SearchBar';
import Header from '../Header';

export class Insurance extends Component {
  constructor(props){
    super(props);
    this.state = {sCode:null};
  }

  onSearchSubmit = (term) => {
    this.setState({sCode:term})
  }

  componentDidMount(){
      this.props.fetchAllInsurances();
  }
  
  render() {    
    return (
      <>
        <Header/>
        <div>
            <SearchBar onSubmit={this.onSearchSubmit}/>
        </div>
        <br></br>
        {this.renderCreate()}
          <br></br>
          <br></br>
          <br></br>
        {this.renderCard()}
        </>
    )
  }

  renderCreate(){
    return(
        <>
          <Link to ={'/addinsurance'} className = "ui primary button">Add Insurance</Link>
        </>        
    )
  }


  renderCard(){
    return(
      <div className="ui four column grid">
        {this.props.insurance.filter(((c)=>{
          if(this.state.sCode == null){
            return c;
          }
          else if(c.VendorName.toLowerCase().includes(this.state.sCode.toLowerCase().toString())){
            return c
          }            
          })).map((c, i) => (
            <Card key={i} InsData={c} />
          ))}
      </div>
    )
  }
}

const mapStateToProps = state =>{
  return{
    insurance:Object.values(state.insurance)
  }
}

export default connect(mapStateToProps,{fetchAllInsurances})(Insurance);

以下是我的搜索组件

    import React from 'react'

 class SearchBar extends React.Component {
    state = {term:''};

    onFormSubmit =(event) =>{
        event.preventDefault();
        //send the state data to the parent
        this.props.onSubmit(this.state.term);
    }
    render(){
        return (
            <div className='ui segment'>
                <form onSubmit = {this.onFormSubmit} action="" className="ui form">
                    <div  className="field">
                        <label>Insurance Vendor Search</label>
                        <div className="searchInputs">
                            <input 
                            type="text"
                            value={this.state.term}
                            onChange={e=> this.setState({term:e.target.value})}
                            placeholder='Enter the insurance vendor to search...'/>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}
export default SearchBar;

Answer 1

作为错误状态，变量未定义。您需要先测试变量。

所以要么使用

c.VendorName?.toLowerCase()

或

if (c.VendorName) {
    c.VendorName.toLowerCase()........
}

Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase') React - Redux

Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase') React - Redux

reactjs

redux