为什么我的组件无法从我的减速器访问数据？

Question

我正在编写一个 React 应用程序，其中有人可以注册为企业或用户，并且用户可以按名称搜索企业。我不明白为什么在尝试呈现我的搜索组件时出现错误，提示“TypeError：无法读取未定义的属性（读取 'toLowerCase'）”。我不明白为什么我会收到此错误，因为我相信我正在通过我的 reducer 和 Redux 存储传递适当的数据。这是我的搜索组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import BusinessCard from '../Business/BusinessCard'
import { Card } from 'semantic-ui-react';

class Businesses extends Component {
    state = {newSearch: ""}


    handleInputChange = e => {
        this.setState({newSearch: e.target.value})
    }

    render() {
        const { businessesReducer} = this.props;
        
        let businessesMatch = businessesReducer.businesses.filter( (business ) => business.name.toLowerCase().includes(this.state.newSearch.toLowerCase()))
        return (
            <div>
               <input placeholder="Search Events and Services Near You" value={this.state.newSearch} name="businessName" type="text" onChange={this.handleInputChange} />

               <Card.Group itemsPerRow={3}>
               { businessesMatch.map((business, id) => <BusinessCard key={id} business={business} />)}
               </Card.Group>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return ({
      businessesReducer: state.businessesReducer
     })
  }

 export default connect(mapStateToProps)(Businesses);

我的业务减速器：

const initialState = 
{
    businesses:[],
    isLoading: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case 'LOADING':
            return {
                ...state,
                isLoading: true
            }
        case "GET_ALL_BUSINESSES_SUCCESS": 
            return { ...state,
                    businesses: action.businesses,
                    isLoading: false
            }
            
    
    default:
            return state
    }
}

BusinessCard.js（我试图根据用户的搜索呈现）

import React, { Component } from 'react'; 
import { Card } from 'semantic-ui-react';
import { connect } from 'react-redux';
 
class BusinessCard extends Component {
  constructor(props) {
    super(props);
  }
 
  render(){
    const { business, businessesReducer } = this.props;

    return(
      
       <Card>
            <div key={business.id} >

                <Card.Content>
                    <Card.Header><strong>{business.name}</strong></Card.Header>
              
                </Card.Content>
             </div>
        </Card>
   
    )
  }
}


 
const mapStateToProps = state => {
  return {
    businesses: state.businesses,
    businessesReducer: state.businessesReducer
  }
}

export default connect(mapStateToProps)(BusinessCard);

和App.js

import { getAllBusinesses } from './actions/business/business';

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import history from './history';


class App extends React.Component {

  componentDidMount() {
    this.props.getAllBusinesses();  
}

render() {
  return (
    <Router history={history}>
    <div className="App">
    <NavBar />


    <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/about" component={About} />
          <Route path="/services" component={Services} /> 
          <Route path="/shop" component={Shop}/>
          <Route path="/login-signup" component={LoginContainer}/>
          <Route path="/signup" component={Signup}/>
          <Route path="/business-signup" component={BusinessSignup}/>
          <Route path="/professional-signup" component={ProfessionalSignup}/>
          <Route path="/search" component={Businesses}/>
    </Switch> 

    </div>
</Router>
  )
}

}

const mapStateToProps = (state) => {
  return {
    businessesReducer: state.businessesReducer
   }
}



export default connect(mapStateToProps, {getAllBusinesses})(App);

有人知道为什么我的搜索组件无法访问“业务”及其属性吗？在我看来一切都是正确的。

Answer 1

1：如果能显示getAllBusinesses就好了。
2：请确保您的商店中是否存在数据，您可以使用redux-dev-tools。
3：你的组件第一次呈现时，你的商店中没有数据，它只是一个空数组，所以请先检查 name 是否存在并具有值，然后尝试将其转换为小写。
它会是这样的：

  let businessesMatch = businessesReducer.businesses.filter(
          (business) =>
            business.name &&
            business.name
              .toLowerCase()
              .includes(this.state.newSearch.toLowerCase())
        );

或者如果 optional chaining:

let businessesMatch = businessesReducer.businesses.filter((business) =>
  business?.name
    .toLowerCase()
    .includes(this.state.newSearch.toLowerCase())
);

如果有 none 这些帮助，请提供更多信息，例如代码沙箱。

为什么我的组件无法从我的减速器访问数据？

Why is my component unable to access data from my reducer?

javascript

reactjs

redux