0

我正在使用 redux 进行个人项目。在我看来，我的 mapStateToProps 函数写得很好。但是当我尝试使用它将对象发送到我的商店时，没有任何效果。

这是我的功能：

const mapDispatchToProps = dispatch => {
    return {
        addOrder: (item) => {
            dispatch(addOrder(item));
        }
    }
}


<div className="recordOrder">
                   <button onclick={() => this.props.addOrder(this.state)}>Enregistrer et lancer la commande</button>
                   </div>

还有我的减速机：

const initialState = {
    orderList : []
}

console.log(initialState);

export default function rootReducer ( state= initialState, action){
    const orderList = [...state.orderList];
    let position
    switch (action.type){
        case ADD_ORDER:
            return {
                orderList : [...state.orderList, action.payload]
            };
        case DELETE_ORDER:
            position = orderList.indexOf(action.payload)
                orderList.splice(position, 1)
            return {
              orderList  
            }
        default:
            return state;
    }
    console.log(state)
}

我的整个组件按要求：

import React, { Component } from 'react';
import { NavItem } from 'react-bootstrap';
import menu from './menu';
import { connect } from 'react-redux';

import { addOrder} from '../action'

class getOrder extends Component {
    state = {
        number: `CMD-${Date.now()}`,
        order:[],
        total: 0 ,
        menu:menu,
        isPaid: false
      }

    

    

    addItem = (index) => {
    const order = [...this.state.order];
    const menu = [...this.state.menu];
    let total = this.state.total;
    const pizza = menu[index];
    console.log(pizza);
    let ind = order.findIndex((item) => 
       item.article == pizza.name
    
    )
    if (ind === -1){
         order.push({article: pizza.name, price: pizza.price, volume:1})
        
         total = total + order[order.length-1].price 
    } else if (ind != -1){
        order[ind].volume++
        total = total + order[ind].price
    }
    
    
    


    this.setState({
        order:order,
        total:total
        
    })
    console.log("youpiii");
    console.log(this.state.total);
    console.log(this.state.order);

    }

    
    render() { 
         

        const menuDisplay= menu.map( (item) => {
            return (
            <div>
                <img onClick={() => this.addItem(item.number)} src={`${process.env.PUBLIC_URL}${item.picture}`} alt="picture" />
                <div className="tagPrice">
                <p>{item.name}</p>
                <p>{item.price} €&lt;/p>
                </div>
            </div>
            
            )
            
        });

        const currentOrder = [...this.state.order]

        const orderDisplay = currentOrder.map((item) => {
           
            
            let price = item.price*item.volume;
           console.log(price);
        
            return (
                <div>
                    <h1>{item.volume} × {item.article}</h1>
                    <p>{price} €&lt;/p>
                </div>
            )
            
        } );

        return ( 
            <div className="takeOrder">
            <div className="orderban">
            <h1>Pizza Reflex</h1>
          </div>
          
          <div>
              <div className="menuDisplay">
                  {menuDisplay}
              </div>
              <div className="orderBoard">
               <h1>Détail de la commande N°{this.state.number}</h1>
               {orderDisplay}
               <div className="total">
                   <h2>Soit un total de {this.state.total} € </h2>
               </div>
               <div className="recordOrder">
                   <button onclick={() => this.props.addOrder(this.state)}>Enregistrer et lancer la commande</button>
                   </div>
              </div>
          </div>
          </div>

         );
    }
}


 const mapDispatchToProps = dispatch => {
    return {
        addOrder: (item) => {
            dispatch(addOrder(item));
        }
    }
}  
 
export default connect ( mapDispatchToProps) (getOrder);

有人可以告诉我我错过了什么吗？

谢谢你的帮助 ！

4

1 回答 1

0

你所缺少的是更多的代码，它不能用你所拥有的来解决。

更详细地说，我需要的是this.state，combinedReducer

您现在可以做的最简单的修复是更改 yow mapDispatchToProps 如果它是一个 obj 效果更好


 const mapStateToProps = (state) => {
      return {
       // here you specified the properties you want to pass yow component fom the state
      }
  };
 const mapDispatchToProps = {action1, action2};  
 
export default connect ( mapDispatchToProps) (getOrder);

connect接收两个参数 mapStateToProps 和 mapDispatchToProps，

mapDispatchToProps是可选的，但 mapStateToProps 是强制性的，你需要指定，如果你不打算传递任何东西，你需要传递一个空值

export default connect (null, mapDispatchToProps) (getOrder);

还要避免导出没有名称的组件示例

function MyButton () {}
const MyButtonConnect = connect(state, dispatch)(MyButton);
export default MyButtonConnect
于 2021-10-03T21:39:39.113 回答