Question

到目前为止，我一直在关注各种教程。这次我试图从头开始构建东西（有点）。现在，以下内容应该显示部分状态。稍后我会玩它做计算等。我仍然收到错误：

无法读取未定义的属性'count'

所以我使用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

编辑：谢谢'prop'=＆gt; '道具'指针。现在我有以下错误：

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`.

Answer 1

在Github上完成你的代码之后，我无法提醒你注意到在你的行动中，你会返回以下对象：

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

如果您打算返回计数，我假设action.payload在这里应该包含一个数字，而不是一个对象。

但是，在您的减速机中，您将返回：

case GET_COUNTER: 
  return action.payload.count;

假设您从CounterBoard组件和CalcReducer中的代码，您可能希望在从reducer返回之前将有效负载合并到初始状态？

您可能还需要在调度getCounter操作时传递和参数，以使组件按预期工作。

React-native / Redux - 状态错误

1 个答案: