在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/Java  HTML/ 初學(xué)redux,為什么第一段的代碼中的dispatch是能用,第二段代碼中的di

初學(xué)redux,為什么第一段的代碼中的dispatch是能用,第二段代碼中的dispatch是未定義的

第一段

import React from 'react'
import { connect } from 'react-redux'
import { addToCart } from '../actions/cart-actions'

let AddTodo = ({ dispatch }) => {
    let input = '';
    
    return (
        <div>
            <form
                onSubmit={e => {
                    e.preventDefault()
                    if (!input.value.trim()) {
                        return
                    }
                    dispatch(addToCart(input.value, 1, 250))
                    input.value = ''
                }}
            >
                <input
                    ref={node => {
                        console.log('輸入的 value ==', node )
                        input = node
                    }}
                />
                <button type="submit">
                    添加購(gòu)物數(shù)據(jù)
                </button>
            </form>
        </div>
    )
}
AddTodo = connect()(AddTodo)

export default AddTodo

第二段

import React from 'react';
import { connect } from 'react-redux'
import './assets/styles/index.less';
import Landscape from './assets/images/landscape.png';
import Logo from './assets/images/logo.png';
import Resize from  'PATH_SRC_UTILS/res';
import HttpUtil from 'PATH_SRC_UTILS/httpUtil';
import Helper from 'PATH_SRC_UTILS/helper';
import StorageApi from 'PATH_SRC_UTILS/storageApi';
import FetchServer from 'PATH_SRC_UTILS/fetchServer';
import { beginToLogin } from '../actions/login-actions'


class Login extends React.Component {

    constructor() {
        super();
        this.state = {
            current: 0
        }

        this.handleClickLi = this.handleClickLi.bind(this);//推薦寫(xiě)法

    }

    handleClickLi = ({dispatch}) => {

        console.log('dispatch = ', dispatch)

    }

    render() {

        const _self = this;
        return (
            <div className={'login_div'}>
                <div
                    className={'login_button'}
                    onClick={() => this.handleClickLi(dispatch(beginToLogin('Coffee 500gm', 1, 250)))}
                >
                    登陸
                </div>
            </div>
        )
    }
}

export default connect()(Login);

圖片描述

回答
編輯回答
絯孑氣

在類(lèi)中dispatch要從this.props拿到
同理,你在handleClickLi直接形參解構(gòu)是拿不到dispatch
第二段代碼改為

render() {
        const { dispatch } = this.props;
        const _self = this;
        return (
            <div className={'login_div'}>
                <div
                    className={'login_button'}
                    onClick={() => this.handleClickLi(dispatch(beginToLogin('Coffee 500gm', 1, 250)))}
                >
                    登陸
                </div>
            </div>
        )
    }
2017年8月26日 05:09
編輯回答
爆扎

首先弄清楚幾個(gè)問(wèn)題

  • 函數(shù)式組件
  • Class組件

當(dāng)你使用函數(shù)作為組件的connect()(funcComponent)的時(shí)候


functionComponent = (props) => <div></div>

其實(shí)接受的是一個(gè)屬性,props內(nèi)有dispatch函數(shù)所以是對(duì)的

class組件呢,是這樣


connect()(classComponent)

這個(gè)時(shí)候,的確是傳入這個(gè)參數(shù),但是那里獲取呢?我們知道classComponent上有兩個(gè)屬性propsstate,一個(gè)代表傳入屬性,一個(gè)代表組件狀態(tài)。
這個(gè)時(shí)候要得到傳入屬性必須是props.dispatch才是OK的。

最后connect的hoc應(yīng)該是對(duì)兩種不同組件做了差異化處理,而不會(huì)直接掛載上去的

2017年11月24日 12:46
編輯回答
笨笨噠
onClick={() => this.handleClickLi(this.props.dispatch(beginToLogin('Coffee 500gm', 1, 250)))}
handleClickLi = () => {
    console.log('dispatch = ', this.props.dispatch)
}
2017年3月27日 01:44