Question

我选择了此选项，以过滤前端的结果，并且似乎可以正常工作，但是当我单击free(buffer);按钮时，我收到以下错误消息：

addTocart

这是我组件的代码：

TypeError: Cannot read property 'map' of undefined

这是我的减速器

import React, { Component } from "react";
import { connect } from "react-redux";
import { getplats, addCart } from "../../action/action";
import { Card, Button } from "antd";
import Cart from "../Cart/Cart";
import { Provider } from "react-redux";
import "./PlatListeU.css";
import "bootstrap/dist/css/bootstrap.min.css";
import PropTypes from "prop-types";
const { Meta } = Card;

class PlatListeU extends Component {
    constructor(props) {
        super(props);
        this.state = {
            search: "",
            searchOrigine: "",
            searchGout: "",
            cmd: "",
        };
    }
    componentDidMount() {
        this.props.getplats();
    }

    updateSearched(event) {
        this.setState({ search: event.target.value.substr(0, 20) });
    }

    updateSearchedOrigine(event) {
        this.setState({ searchOrigine: event.target.value });
    }

    updateSearchedGout(event) {
        this.setState({ searchGout: event.target.value });
    }
    //midfy
    addCmd(event) {
        this.setState({
            cmd: event.target.value,
        });
    }
    handleClick(ele) {
        this.props.cmdElements.push(ele);
    }

    render() {
        return (
            <div>
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <a class="navbar-brand" href="#">
                        {" "}
                        Restaurant{" "}
                    </a>
                    <button
                        class="navbar-toggler"
                        type="button"
                        data-toggle="collapse"
                        data-target="#navbarNavAltMarkup"
                        aria-controls="navbarNavAltMarkup"
                        aria-expanded="false"
                        aria-label="Toggle navigation"
                    >
                        <span class="navbar-toggler-icon"> </span>
                    </button>
                    <div
                        class="collapse navbar-collapse"
                        id="navbarNavAltMarkup"
                    >
                        <div class="navbar-nav">
                            <a class="nav-item nav-link" href="#">
                                {" "}
                                cart{" "}
                            </a>
                        </div>
                    </div>
                </nav>

                <form>
                    <input
                        type="text"
                        placeholder="press name"
                        value={this.state.search}
                        onChange={this.updateSearched.bind(this)}
                    />
                    <br />
                    <br />

                    <br />
                    <select
                        name="origine"
                        value={this.state.searchOrigine}
                        onChange={this.updateSearchedOrigine.bind(this)}
                    >
                        {uniq(this.props.platListe.map((el) => el.origine)).map(
                            (el) => (
                                <option>{el} </option>
                            )
                        )}
                    </select>
                    <br />
                    <select
                        name="gout"
                        value={this.state.searchGout}
                        onChange={this.updateSearchedGout.bind(this)}
                    >
                        {uniq(this.props.platListe.map((el) => el.nature)).map(
                            (el) => (
                                <option>{el} </option>
                            )
                        )}
                    </select>
                </form>

                <br />
                <div className="list">
                    {this.props.platListe
                        .filter((plat) => {
                            return (
                                plat.name
                                    .toLowerCase()
                                    .indexOf(this.state.search) !== -1
                            );
                        })
                        .filter((plat) => {
                            return (
                                plat.origine.indexOf(
                                    this.state.searchOrigine
                                ) !== -1
                            );
                        })
                        .filter((plat) => {
                            return (
                                plat.nature.indexOf(this.state.searchGout) !==
                                -1
                            );
                        })
                        .map((el, li) => (
                            <div>
                                <Card
                                    hoverable
                                    style={{ width: 240 }}
                                    cover={
                                        <img
                                            alt="example"
                                            src={el.image}
                                            style={{ width: 240, height: 180 }}
                                        />
                                    }
                                >
                                    name : <Meta title={el.name} />
                                    price: <Meta title={el.price} />
                                    origine: <Meta title={el.origine} />
                                    gout: <Meta title={el.nature} />
                                    <Button
                                        type="primary"
                                        onClick={() => {
                                            this.props.addCart();
                                        }}
                                    >
                                        {" "}
                                        addTocart{" "}
                                    </Button>
                                </Card>
                            </div>
                        ))}
                </div>
            </div>
        );
    }
}

PlatListeU.propTypes = {
    addCart: PropTypes.func.isRequired,
    PlatListe: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => {
    return {
        platListe: state.plats,
        cmdElements: state.cmdElements,
    };
};

export function uniq(arr) {
    return arr.filter((value, index) => arr.indexOf(value) === index);
}

export default connect(mapStateToProps, { getplats, addCart })(PlatListeU);

Answer 1

this.props.platListe.map(...)

看起来错误是来自以上代码。您的platListe是undefined，因此无法在其上使用map函数。

const mapStateToProps =(state) =>{
    return{
        platListe:state.plats ,
         cmdElements:state.cmdElements
        
    }
}

您在道具中将state.plats映射为platListe，因此我认为您的redux商店的plats属性是undefined或null（不是数组）

您只需要确保state.plats可以作为数组使用。或一个简单的解决方法：

const mapStateToProps = (state) => {
    return {
        platListe:state.plats || [],
        cmdElements:state.cmdElements
    }
}

Answer 2

这是我的减速器


import { GET_PLATS } from "../action/actionType"
 
const initialState={
    plats:[],
    cmdElements:[]
}

export default function(state=initialState,action){
    switch(action.type){
        case GET_PLATS:
             return{
                 ...state,
                 plats:action.payload,
                 cmdElements:state.cmdElements
              
             }
             default : 
              return  state

        }
    
}

TypeError：无法在React Redux中读取未定义的属性'map'

2 个答案: