使用反應/終極版使用

我第一次mapDispatchToProps反應過來的時候就沒有定義事件監聽終極版的道具和我想要一個簡單的動作addClick綁定到「click」事件，但是當我點擊我收到的錯誤：使用反應/終極版使用

Uncaught TypeError: Cannot read property 'props' of undefined

我（精簡）的代碼是：

import {addClick} from './actions' 
const mapDispatchToProps = {addClick} 
class App extends Component { 
    componentDidMount() { 
     document.addEventListener('click', this.props.addClick) 
    } 
    componentWillUnmount() { 
     document.removeEventListener('click', this.props.addClick) 
    } 
} 
export default connect(mapStateToProps, mapDispatchToProps)(App)

我以前用它在構造函數中類和綁定中定義爲this行動的創建者實現，而不mapDispatchToProps。但我認爲mapDispatchToProps點的一部分是綁定動作創建者this（以及包裝它在dispatch）

我錯過了什麼？

謝謝！

來源

2017-08-31 Taaam

您可以將代碼添加到您的動作創建者addClick嗎？你在addClick中使用「this」嗎？ – jonahe

哇，我真笨！當我定義它並將其綁定到類中時，我在之前的動作中使用了'this.props'。 – Taaam

呵呵，它發生在最好的狀態（並且會再次發生）;） – jonahe

你使用道具裏面的addClick動作嗎？

檢查這個例子：

import React from "react"; 
import { render } from "react-dom"; 
import { connect, Provider } from "react-redux"; 
import { createStore } from "redux"; 

function addClick(event) { 
    return { 
    type: "CLICK", 
    payload: `pageX: ${event.pageX} | pageY: ${event.pageY}` 
    }; 
} 

const mapStateToProps = state => { 
    return { 
    clickXY: state 
    }; 
}; 
const mapDispatchToProps = { addClick }; 

class App extends React.Component { 
    componentDidMount() { 
    document.addEventListener("click", this.props.addClick); 
    } 
    componentWillUnmount() { 
    document.removeEventListener("click", this.props.addClick); 
    } 
    render() { 
    return (
     <h1> 
     Click message: {this.props.clickXY} 
     </h1> 
    ); 
    } 
} 

function clickReducer(state = "None", action) { 
    switch (action.type) { 
    case "CLICK": { 
     return action.payload; 
    } 
    default: 
     return state; 
    } 
} 

let store = createStore(clickReducer); 

const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App); 

class Root extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <AppContainer /> 
     </Provider> 
    ); 
    } 
} 

render(<Root />, document.getElementById("root"));

鏈接editor

所以綁定的作品以及在此代碼。你能分享addClick方法的代碼嗎？

來源

2017-08-31 14:40:29 chuve

從文檔中我可以看出，用於mapDispatchToProps的short_hand（const mapDispatchToProps = {addClick}）對象不會將this與任何東西綁定。它只是看到你的addClick動作創建者被派遣調用。因此，如果您在組件中執行addClick(3)，那麼這將導致看起來像這樣的電話dispatch(addClick(3))。

我不確定爲什麼你的動作創建者需要訪問this。難道你不能把它作爲參數需要的數據傳遞給它嗎？因此，您的組件中的呼叫可能看起來像

componentDidMount() { 
     const {addClick, someOtherProp} = this.props; 
     document.addEventListener('click',() => addClick(someOtherProp)); 
    }

來源

2017-08-31 14:47:15 jonahe

使用反應/終極版使用

回答

相關問題