React-Redux State不会更新/呈现

Question

下午好，

在完成一些教程之后，我一直在尝试创作。但是我现在处于死胡同。

每当我尝试更新状态时，它都不会更新。它很奇怪，因为我以前能够更新状态。我担心我会忽略我在尝试使事情发生时所犯的错误。

当前页面状态应该更新，然后在屏幕上呈现一个新页面，我不确定这是否是正确的方法。所以我愿意接受有关aswel的反馈。

非常感谢帮助。

减速器：

const pageLists = (state = [], action) => {
  switch (action.type) {
    case 'ADD_PAGE_LIST':
      return [
        ...state,
        {
          id: action.id,
        }
      ];
    case 'NEXT_PAGE':
      console.log(action.id);
      console.log(action.nextPageId);
      return state.map((pageLists, index) => {
        console.log(index);
        if (index === action.id) {
          console.log("Next page succes")
          return Object.assign({}, pageLists, {
            currentpage: action.nextPageId
          })
        }
        return pageLists
      })
    default:
      return state
  }
}

export default pageLists

容器页面列表

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import Page from '../components/Page.jsx';
import {addPage} from '../actions/addPage.js'
import {nextPage} from '../actions/nextPage.js'
import RaisedButton from 'material-ui/RaisedButton';
import _ from 'lodash';

class PageList extends Component {
  constructor(props){
    super(props);
    this.state = {
      currentpage: 0,
    };
  }

  renderList() {
    if(this.props.item){
      return (
        <div>
          <RaisedButton label="Next Page" onClick={() => this.props.nextPage(this.props.index, this.state.currentpage)}></RaisedButton>
          <Page key={this.props.item.id} index={this.props.item.id}>
            {this.props.item.title}
            {this.props.item.desc}
          </Page>
        </div>
      );
    }else{
      return(
        <p>No Pages</p>
      )
    }
  }

    render() {
        return (
          <div>
            <RaisedButton label="Add new Page" onClick={() => this.props.addPage("Titel Page", "Page Beschrijving")}></RaisedButton>
            <ul>
                {this.renderList()}
            </ul>
          </div>
        );
    }
}

// Get apps state and pass it as props to PageList
//      > whenever state changes, the PageList will automatically re-render
function mapStateToProps(state, ownProps) {
    return {
        pageLists: state.pageLists,
        item: _.find(state.pages, 'id', ownProps.currentpage)
    };
}

// Get actions and pass them as props to to PageList
//      > now PageList has this.props.selectPage
function matchDispatchToProps(dispatch){
    return bindActionCreators({addPage: addPage, nextPage: nextPage}, dispatch);
}

// We don't want to return the plain PageList (component) anymore, we want to return the smart Container
//      > PageList is now aware of state and actions
export default connect(mapStateToProps, matchDispatchToProps)(PageList);

component survey.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import {updateSurveyText} from '../actions/updateSurveyText.js'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import PageList from '../containers/page-list.js';
import {addPageList} from '../actions/addPageList.js'

class Survey extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      editing : false,
    };
    this.edit = this.edit.bind(this);
    this.save = this.save.bind(this);
    this.remove = this.remove.bind(this);
  }

  renderList(){
    console.log("page id =" + this.props.index);
    {this.props.addPageList()}
    return(
      <PageList key={this.props.index} index={this.props.index}>
      </PageList>);
  }

  edit() {
    this.setState({editing: true});
  }

  remove() {
    console.log('delete');
    this.props.deleteFromBoard(this.props.index)
  }

  save() {
    var title = this.refs.newTitle.value;
    var desc = this.refs.newDesc.value;
    console.log(this.props.index);
    this.props.updateSurveyText(title, desc, this.props.index);
    this.setState({editing: false});
  }

  renderNormal(){
    return(
      <div className="surveyContainer">
        <div className="surveyTitle">{this.props.children[0]}</div>
        <div className="surveyDesc">{this.props.children[1]}</div>
        <button onClick={this.edit} className="button-primary">Edit</button>
        <button onClick={this.remove} className="button-primary">Remove</button>
        {this.renderList()}
      </div>
    );
  }

  renderForm(){
    return(
      <div className="surveyContainer">
        <textarea ref="newTitle" defaultValue={this.props.children[0]}></textarea>
        <textarea ref="newDesc" defaultValue={this.props.children[1]}></textarea>
        <button onClick={this.save} className="button-primary">Save</button>
      </div>
    );
  }

  render(){
      if(this.state.editing){
        return this.renderForm();
      }else{
        return this.renderNormal();
      }
  }
}

// Get apps state and pass it as props to SurveyList
//      > whenever state changes, the SurveyList will automatically re-render
function mapStateToProps(state) {
    return {
        surveys: state.surveys
    };
}

// Get actions and pass them as props to to SurveyList
//      > now SurveyList has this.props.selectSurvey
function matchDispatchToProps(dispatch){
    return bindActionCreators({updateSurveyText: updateSurveyText, addPageList: addPageList}, dispatch);
}

// We don't want to return the plain SurveyList (component) anymore, we want to return the smart Container
//      > SurveyList is now aware of state and actions
export default connect(mapStateToProps, matchDispatchToProps)(Survey);

动作nextPage.js：

export const nextPage = (id, nextPageId) => ({
  type: 'NEXT_PAGE',
  id: id,
  nextPageId: nextPageId+1
})