React-native/Redux - 錯誤狀態

到目前爲止，我一直在關注各種教程。這一次我試圖從頭開始構建（某種）。現在以下應該顯示部分狀態。稍後我會玩弄它做計算等。儘管如此，我得到一個錯誤：React-native/Redux - 錯誤狀態

Cannot read property 'count' of undefined

於是我就用mapStateToProps，我想要做的第一步就是要得到它顯示this.props.count和this.props.step。一旦我完成了，我會修改它來做更復雜的事情。

這裏是組件和下面有一個鏈接到我放在github上的整個代碼。

import React, { Component } from 'react'; 
import { View, Text } from 'react-native'; 
import { connect } from 'react-redux'; 
import { getCounter } from '../actions'; 

class CounterBoard extends Component { 
    render() { 
    return (
     <View> 
     <Text>BELOW SHOULD DISPLAY 0</Text> 
     <Text>{this.prop.count}</Text> 
     </View> 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    count: state.count, 
    step: state.step 
    }; 
}; 

export default connect(mapStateToProps, { getCounter })(CounterBoard);

https://github.com/wastelandtime/calculator

編輯：謝謝你的 '託'=> '道具' 指針。現在我有以下錯誤：

ExceptionsManager.js:63 Objects are not valid as a React child (found: object with keys {count, step}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Text`.

來源

2017-01-29 Wasteland

你有this.prop，應該是this.props。 – Hosar

謝謝 - 這解決了一個問題。上面看到我的更新 – Wasteland

通過Github上的代碼去後，我不禁注意到，在你的行動，你返回以下對象：

export const getCounter = (count) => { 
    return { 
    type: GET_COUNTER, 
    payload: count 
    }; 
};

如果您打算爲了返回計數，我假設action.payload應該包含一個數字，而不是一個對象。

然而，在你減速，你回：

case GET_COUNTER: 
    return action.payload.count;

從代碼假設你CounterBoard組件和CalcReducer，你可能想從減速返回前，你的有效載荷合併到初始狀態？

您可能還需要在調度getCounter操作時傳遞參數，以使組件按預期工作。

來源

2017-01-29 21:16:56 Nupur

謝謝。請接受我的道歉，但請您詳細說明。我以爲我得到了整個redux機制 - 但似乎我沒有。 – Wasteland

React-native/Redux - 錯誤狀態

回答

相關問題