Question

当我更新计数器1时，它增加了，但组件未达到更新状态。状态更新后，计数器未显示更新的数字。但是，如果我转到另一个组件并返回到计数器组件，则会得到更新状态。这是计数器页面-

const app = (() => {

  let numRaces = 6,
      raceElements = [ ];

  for( var i = 0; i < numRaces; i++ )
  {
    raceElements.push( document.querySelector('.race'+(i+1)) );
  }

  const returnAll = () => {
    fetch('php/index.php').then((response) => { return response.json(); }).then((myJson) => {
      for (var i = 0; i < myJson.length; i++) {

        for( var r = 0; r < numRaces; r++ )
        {
          if( myJson[i]['race'+(r + 1)])
          {
            raceElements[r].innerHTML+= '<div>'+myJson[i].email+'</div>';
          }
        }
      }
    });

    console.log(allEnteries);
  }

  return {
    init: () => {
      returnAll();
    }
  }
})();

app.init();

从组件调用“ increaseXaomi”方法时，将调用计数器动作。

 import React, { Component } from 'react'
import {connect} from 'react-redux'
import {increaseXaomi} from '../../store/actions/counterAction';

class Counter extends Component {
    increaseXaomi =  ()=>{
        this.props.increaseXaomi();
    }
    render() {
        console.log(this.props)
        return (
            <div className="container">
                <div className="row">
                    <p>Xaomi <strong>{this.props.xaomi}</strong></p>
                    <p>Iphone <strong>{this.props.iphone}</strong></p>
                    <p>Huai <strong>{this.props.huai}</strong></p>
                    <button className="btn" onClick={this.increaseXaomi}>Increase Xaomi</button>
                </div>
            </div>
        )
    }
}
const mapStateToProps = ({counter})=>{
    return counter;
}
const mapDispatchToProps = (dispatch)=>{
    return {
        increaseXaomi: ()=>{
            increaseXaomi(1)(dispatch)
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Counter);

Counter Reducer获取用于增加计数器的动作类型和计数器值。它返回更新状态。

export function increaseXaomi(num=1){
    return (dispatch)=>{
        dispatch({
            type:'INCREASE_XAOMI',
            payload:num
        })
    }
}

Answer 1

在使用redux时，要确保不改变状态，您需要创建一个新的状态对象（浅表副本）。请参阅此link，以获取有关Redux中的突变和更新模式的更多信息。

您的代码应为：

firebase.auth().currentUser

Answer 2

您正在改变减速器上的状态。

您应该始终返回状态的新实例。

function counterReducer(state=initState,action){
   switch(action.type){
      case 'INCREASE_XAOMI':
          return { ...state, xaomi: state.xaomi + action.payload };
      default:
          return state;
   }
}

状态为update时，无法从redux存储获取更新状态

2 个答案: