Question

在我的顶级组件App.js中，我有

<ul class="nav">
  <li><button></button></li>
  <li><button></button></li>
</ul>

我的减速机是这样处理的：

  $.fn.slider = function () {

    $(this).each(function () {

      var $this = $(this);

      var $pages = $this.find("button");

      $pages.on("click", function (element) {             
        console.log($(element).index($pages));
      });

我结合了我的减速器：

 componentWillMount() {
    let data = [];

    for (let i = 0; i < 10; i++) {
      let todayURL = 'http://www.someURL.com/';
      let viewDate = moment()
        .add(1, 'years')
        .add(i, 'days')
        .format('MMM-DD');

      let date = moment()
        .add(1, 'years')
        .add(i, 'days')
        .format('YYYY-MMM-DD');

      let cardURL =
        todayURL +
        moment()
          .add(1, 'years')
          .add(i, 'days')
          .format('YYYY/MMM-DD.png');

      data.push({
        id: i,
        date,
        uri: cardURL
      });
    }

    store.dispatch({ type: 'data_generated', payload: data });

这背后的想法是拥有一个应用程序可以使用并保持的初始数据集。

在显示数据集中的信息的子组件中，我访问状态：

export default (state = [], action) => {
case 'data_generated':
      return { ...state, calendarData: action.payload };

    default:
      return state;
  }
};

但是当我控制日志时，我看到一个空数组：

这是使用React Navigation的React Native应用程序。

发生了什么事？

Answer 1

尝试在组件的构造函数中调用props。这是一个很好的调试首次亮相希望它有所帮助

constructor(props) {
    super(props);
    console.log(this.props);
    this.state = {
            calendarData: props.calendarData
    };
}
componentWillReceiveProps(nextProps) {
    if (this.props.calendarData !== nextProps.calendarData) {
        this.setState({
            calendarData: nextProps.calendarData,
        });
    }
}

Answer 2

在lengthy chat之后，我发现了什么是错的。不幸的是，对于我们中的许多人来说，React就像本机JavaScript一样，非常善于让您不正确地放置代码。

您正在组件中配置路由，并在life cycle functions中有足够的逻辑，其中一个是将数据发送到商店，而该商店从未到达您的Reducer。

通过将action App.js内的action.js代码分离到专用的mapDispatchToProps文件，然后将相同的函数导入并添加到{{}}，我们可以解决您的问题。在Home.jsx内{1}}。最后，在componentWillMount() Home.jsx this.props.actionName()上，1 2 1 3 2 3 3 4

调用行动

您的代码似乎没有遵循Reacts开发人员自己推荐的任何约定。

如果您想提高React的编程技能以及一般的编程技巧，我建议您使用以下Udemy course by Stephen Grider。

mapStateToProps不返回任何数据

2 个答案: