Question

我不明白为什么在成功执行操作和存储更新后，响应没有重新呈现。我认为我在我的React组件中执行所有算术然后发送对象通过槽分配时，并没有改变我的reducer中的状态。我的react组件已连接mapStateToProps并连接。任何帮助将不胜感激。

下面是我的反应组件。

> unlist(labels)
                    make                      mpg                    rep78                 headroom 
        "Make and Model"          "Mileage (mpg)"     "Repair Record 1978"         "Headroom (in.)" 
                   trunk                   weight                   length                     turn 
 "Trunk space (cu. ft.)"          "Weight (lbs.)"           "Length (in.)"     "Turn Circle (ft.) " 
            displacement               gear_ratio                  foreign 
"Displacement (cu. in.)"             "Gear Ratio"               "Car type"

我的减速器

const mapStateToProps = (state) =>({


name:state.user.name,
email:state.user.email,
password:state.user.password,
skill:state.user.skill,
goal:state.user.goal,
step1:state.user.step1,
step2:state.user.step2,
step3:state.user.step3,
step4:state.user.step4,
step5:state.user.step5,
completed:state.user.completed,

})



const mapDispatchToProps = (dispatch) => ({
  callApi: (value, state) => {


var obj = {
date:moment.tz(moment.tz.guess()).format(),
post:state.post,
email:state.email,
completed:(parseFloat(state.completed) + .75),
}

    API.addPost(obj)
    .then(function(res){
      dispatch(updateUser(res.data))
    })
  }

})
export default connect(mapStateToProps,mapDispatchToProps)(YourPage);

Answer 1

您是否签入了正在更新商店的开发工具？如果不检查动作是否击中了reducer（将console.log添加到reducer），并且如果console.log没有触发，则可能是您调用了导入的动作，而不是带有分派的动作。请确保使用“ this.props.action（）”而不是“ action（）”来调用它，除非您对其进行了结构分解。

Answer 2

您的问题不在其他地方

添加console.logs以检查以下内容

动作类型常量
API响应
Reducer中的默认情况

works properly下的代码

import React, { Component } from 'react';
import { render } from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { connect, Provider } from 'react-redux';
import moment from 'moment';
import 'moment-timezone';
import './style.css';

const DEFAULT_STATE = {
  createdAt: "",
  name: "",
  email: "",
  password: "",
  skill: "",
  goal: "",
  step1: "",
  step2: "",
  step3: "",
  step4: "",
  step5: "",
  posts: [],
  completed: 0
};

const reducer = function (state = DEFAULT_STATE, action) {
  switch (action.type) {
    case 'update user':
      return Object.assign({}, state, {
        completed: action.payload.completed
      });
    default:
      return state;
  }
}


const reducers = combineReducers({
  user: reducer,
})

const updateUser = (payload) => ({
  type: 'update user',
  payload,
})

const API = {
  addPost: obj => new Promise(resolve => setTimeout(() => resolve({ data: obj }), 500))
}

const mapDispatchToProps = (dispatch) => ({
  callApi: (value, state) => {
    var obj = {
      date: moment.tz(moment.tz.guess()).format(),
      post: state.post,
      email: state.email,
      completed: (parseFloat(state.completed) + .75),
    }

    API.addPost(obj)
      .then(function (res) {
        dispatch(updateUser(res.data))
      })
  }

})

const store = createStore(reducers);

class App extends Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <button onClick={() => this.props.callApi(1, this.props)}>Call API</button>

        <div>Value: {this.props.completed}</div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  name: state.user.name,
  email: state.user.email,
  password: state.user.password,
  skill: state.user.skill,
  goal: state.user.goal,
  step1: state.user.step1,
  step2: state.user.step2,
  step3: state.user.step3,
  step4: state.user.step4,
  step5: state.user.step5,
  completed: state.user.completed,

})

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

render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

使用prop更改进行React Redux不重新渲染

2 个答案: