history.push() 后减速器状态丢失

Question

依赖关系

"react": "^17.0.1"
"react-redux": "^7.2.2"

我有一个只有几个步骤的注册页面，每个步骤都有不同的形式。我根据 url 中的段更改了表格。所以我想通过将其存储到减速器来跟踪步骤进度，但它仅在加载第一个表单（默认表单）时才有效。

history.push()

后触发SecondStep表单导致reducer状态丢失的下一步

父组件

import React from "react";
import { useSelector } from 'react-redux';
import FirstStep from './FirstStep';
import SecondStep from './SecondStep';

export default function Register({
    url
}) {
    const { stepTracker } = useSelector(state => state.registrationReducer)
    const segment = url.substring(url.lastIndexOf('/') + 1);

    console.log(stepTracker)

    function renderForm(){
        var tpl = (<FirstStep url={url} />)
        if(segment === 'register'){
            tpl = (<FirstStep url={url} />)
        }
        if (segment === 'step2') {
            tpl = (<SecondStep url={url} />)
        }
        return tpl;
    }

    return (
        <div className="section-form highlight">
            <div className="container bg-white container-padding">
                {/* other html code here */}
                <div className="register-form text-center">
                    { renderForm() }
                </div>
            </div>
        </div>
    );
}

子组件 - FirstStep

import React from "react";
import { useDispatch } from 'react-redux'
import { useHistory } from "react-router-dom";
import { onStepChange } from '../../../redux/actions/registrationActions';

export default function FirstStep({
    url
}) {
    const dispatch = useDispatch()
    const history = useHistory()

    function nextStep(){
        dispatch(onStepChange('step2', true));
        history.push(`${url}/step2`)
    }
    
    return (
        <div>
            {/* other html code here */}
            <a onClick={()=>nextStep()} className="boxed-btn3 btn-block">Next Step</a>
        </div>
    );
}

console.log(stepTracker)在history.push()触发后变为undefined。

Answer 1

问题出在你的 reducer 逻辑上（只在沙箱中看到，在问题中没有看到）。

问题出在：

return {
  ...state.stepTracker,
  [fieldName]: value
};

工作原理如下：

return {
  ...state,
  stepTracker: {
    ...state.stepTracker,
    [fieldName]: value
  }
}

原因是，stepTracker 属性在你的 reducer 状态下被替换了。所以最初 reducer 状态类似于

{
  stepTracker: {
    step1: true,
    step2: false,
    step3: false
  }
}

但变成了这样：

{
  step1: true,
  step2: false,
  step3: false
}

history.push() 后减速器状态丢失

Reducer state lost after history.push()

state

reducers

reactjs

react-redux