组件中的Redux状态在操作分派后未更新，但在redux devtools中显示

Question

当菜单中的一项被单击时，我正在运行这段代码。

import React, { Component } from 'react';
import 'react-dropdown-tree-select/dist/styles.css';
import { connect } from 'react-redux';
import '../../../css/tree.css';
import updateSelectedTree from '../../../redux/actions/menu/updateSelectedTree';
import {updateTraceName} from '../../../redux/actions/plot/traceActions';
import { removeRenameProp, pushRenameProp } from '../../../redux/actions/menu/renameActions'
import resolveTraceName from '../../../utils/resolveTraceName';
import MeasureTreeSelector from './MeasureTreeSelector';
class MeasureTreeSelectorContainer extends Component {
    render() {
        return (<MeasureTreeSelector
            isSingle={false}
            tags={this.props.tags}
            selected={this.props.selected}
            handleTreeChange={this.handleTreeChange}
        > </MeasureTreeSelector>);

    }
    handleTreeChange = (curr, selected) => {
        console.log(curr)
        // Get the order of the selected items
        const selectedProperty = [...curr.path.split("/").splice(1), curr.value]

        if(curr.checked) {
            this.props.pushRenameProp(selectedProperty)
        } else {
            this.props.removeRenameProp(selectedProperty)
        }
       console.log(this.props.rename_props)
       this.props.updateSelectedTree(this.props.rename_props)
    }

    updateTraces = () => {
       this.props.measures.forEach(element => {
           const newName = resolveTraceName(element, this.props.rename_props);
           console.log(newName)
           this.props.updateTraceName(newName, element.id)
       }) 
    }
}

const mapStateToProps = (state) => {
    console.log(state.menuReducer)
    return {
        tags: state.menuReducer.tags,
        selected: state.menuReducer.selected,
        measures: state.menuReducer.json,
        rename_props: state.menuReducer.rename_props
    }
}
const mapDispatchToProps = {
    updateSelectedTree,
    updateTraceName,
    removeRenameProp,
    pushRenameProp
}
export default connect(mapStateToProps, mapDispatchToProps)(MeasureTreeSelectorContainer);

pushRenameProp和removeRenameProp是用于更新rename_props的同步操作。这些reducers不会改变状态，但会创建一个新的状态，这意味着组件中应该有一个更新。

export function pushRenameProp(prop) {
    return {
        type:'PUSH_RENAME_PROP',
        payload: prop
    }
}

export function removeRenameProp(prop) {
    return {
        type:'REMOVE_RENAME_PROP',
        payload: prop
    }
}
 case 'PUSH_RENAME_PROP':{
            console.log(action.payload)
            return {
                ...state,
                rename_props: [...state.rename_props,action.payload]
            }
        }
        case 'REMOVE_RENAME_PROP': {
            return {
                ...state,
                rename_props: state.rename_props.filter((e,i) => {
                    return JSON.stringify(e) != JSON.stringify(action.payload) 
                })
            }
        }

当我执行此操作时，devtools显示redux状态已更新，但代码显示rename_props为空。

似乎组件属性是redux状态后面的一个状态更改。

Answer 1

这一行this.props.updateSelectedTree(this.props.rename_props)在设置rename_props之前将其设置为打开状态。所以它只是否定了这个变化。

你可以一下子做到这一点：

export function pushRenameProp(prop) {
    return function (dispatch, getState) {
        dispatch({
            type:'PUSH_RENAME_PROP',
            payload: prop
        })
        const state = getState();
        
        return dispatch(updateSelectedTree(state.menuReducer.rename_props)
    }
}

以确保updateSelectedTree具有最新的状态。

*代码没有经过测试，但我认为您已经理解了这一点的要点。

但也可能根本不需要updateSelectedTree。你只是通过推送/移除来改变状态，为什么要更新呢？