Javascript React-使用道具更改重新执行非重新渲染

我不明白为什么react在成功操作和存储更新后不重新渲染。我不认为我在我的reducer中改变了状态，因为我在我的react组件中执行了所有的算法，然后通过dispatch发送对象。我的react组件已将MapStateTrops连接并连接。任何帮助都将不胜感激

下面是我的react组件

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);

我的减速机

import {UPDATE_USER, CREATE_USER,CREATE_SKILL,CHECK_USER} from '../actions/index';


const DEFAULT_STATE =

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


export default function(state = DEFAULT_STATE, action) {
  if (action.error) {
    action.type = 'HANDLE_ERROR'; // change the type
  }
  switch (action.type) {


    case UPDATE_USER:



    return Object.assign({},state,{

    completed:action.payload.completed

    })

---

您是否在dev tools中签入您的商店正在更新？如果不检查操作是否命中过减速器（将console.log添加到减速器），如果console.log未触发，则可能是您调用了导入的操作，而不是带有分派的操作。请确保使用“this.props.action（）”而不是“action（）”来调用它，除非您将其分解。

您的问题在后面的其他地方

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

动作类型常数

API响应

减速器中的默认情况

下面的代码

import React，{Component}来自'React'；
从'react dom'导入{render}；
从'redux'导入{createStore，combinereducer}；
从'react redux'导入{connect，Provider}；
从“力矩”中导入力矩；
输入“时刻时区”；
导入“/style.css”；
常量默认状态={
创建数据：“”，
姓名：“，
电邮：“，
密码：“”，
技能：“，
目标：“，
第1步：“，
第2步：“，
第3步：“，
步骤4:“，
第5步：“，
员额：[]，
已完成：0
};
const reducer=函数（状态=默认状态，动作）{
开关（动作类型）{
案例“更新用户”：
返回Object.assign（{}，state{
已完成：action.payload.completed
});
违约：
返回状态；
}
}
常数减速机=组合减速机({
用户：减速器，
})
const updateUser=（有效负载）=>({
键入：“更新用户”，
有效载荷，
})
常量API={
addPost:obj=>newpromise（resolve=>setTimeout（（）=>resolve（{data:obj}），500））
}
const mapDispatchToProps=（调度）=>({
callApi：（值，状态）=>{
var obj={
日期：moment.tz（moment.tz.guess（））.format（），
post:state.post，
电子邮件：state.email，
已完成：（解析浮点（state.completed）+.75），
}
API.addPost（obj）
.然后（功能（res）{
调度（更新用户（资源数据））
})
}
})
常量存储=创建存储（还原器）；
类应用程序扩展组件{
render（）{
console.log（this.props）；
返回(
this.props.callApi（1，this.props）}>callApi
值：{this.props.completed}
);
}
}
常量mapStateToProps=（状态）=>({
名称：state.user.name，
电子邮件：state.user.email，
密码：state.user.password，
技能：state.user.skill，
目标：state.user.goal，
步骤1:state.user.step1，
步骤2:state.user.step2，
步骤3:state.user.step3，
步骤4:state.user.step4，
步骤5:state.user.step5，
已完成：state.user.completed，
})
const-AppContainer=connect（mapStateToProps、mapDispatchToProps）（应用程序）；
渲染(
,
document.getElementById（'root'））
);

@Colin，你确定吗。据我所知，

prop

更改会导致重新播放，除非我们采取措施阻止它。感谢您的回复。我确实检查了开发工具，我确实看到我的商店正在更新。还原程序正在被命中。感谢您的回复，我将在这些地方添加控制台日志，看看我得到了什么，但从目前为止我可以看出，正确的还原程序正在被命中，存储正在更新。我看到您发布的代码只使用redux状态，但我在代码中所做的是从redux状态设置组件的本地状态。这样做有什么不对吗？这是多余的，当应用程序级别的状态更改时，需要额外的代码来考虑本地状态更新。对于派生的、昂贵的数据处理，最好使用

重新选择

。否则，只需在渲染中定义更多常量即可

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')
);