调用 Redux 操作时没有更新道具

Question

只是一个免责声明 - 当我的主要组件中有问题的功能时，我的代码可以正常工作。在我导出它之后，它停止了应有的行为。我的理论是因为某些道具没有正确更新。

无论如何，我有一个组件，单击它后它开始侦听窗口对象并将适当的存储元素设置为“true”，并根据单击的下一个对象进行相应的操作。点击不正确的对象后，store 应该恢复为 false，并且确实如此，但是 props 仍然是“true”，如下面的屏幕截图所示。

我该如何解决这个问题？也许有一种方法可以让函数将存储作为参数而不是道具？或者我不正确地调用动作或我完全错过了什么？

代码如下：

主要组件（相关部分？）：

import React from 'react';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import {activate} from '../../actions/inventory'
import { setModalContent, setModalState } from '../../actions/modal';
import inventoryReducer from '../../reducers/inventory';

import {chainMechanics} from './itemMechanics/chainMechanics';


class ItemRenderer extends React.Component{

    handleBoltcuttersClicked(){
        this.props.activate('boltcutters', true);
        setTimeout(() => chainMechanics(this.props), 100)
    }

    inventoryItemRender(){
        let inventoryItem = null;
        if(this.props.inventory.items.boltcutters){
            inventoryItem = <a className={this.props.inventory.activeItem.boltcutters ? "ghost-button items active " : "ghost-button items"} href="#" id='boltcuttersId' onClick={() => this.handleBoltcuttersClicked()}>Boltcutters</a>
        }
        return inventoryItem;
    }

    render(){
        let renderItems = this.inventoryItemRender();
        return(
            <div>
                {renderItems}
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        level: state.level,
        inventory: state.inventory
    }
}

function mapDispatchToProps(dispatch) {
    //dispatch w propsach
    return(
        bindActionCreators({activate: activate, setModalState: setModalState, setModalContent: setModalContent }, dispatch)
    ) 
  }

export default connect(mapStateToProps, mapDispatchToProps)(ItemRenderer);

功能有问题的文件：

import {activate} from '../../../actions/inventory'
import { setModalContent, setModalState } from '../../../actions/modal';

export function chainMechanics(props){
    let clickedElement;
    window.onclick = ((e)=>{
        console.log(clickedElement, 'clickedelement', props.inventory.activeItem.boltcutters)
        if(props.inventory.activeItem.boltcutters===true){
            clickedElement = e.target;
            if(clickedElement.id === 'chainChainedDoor'){
                props.activate('boltcutters', false);
                props.setModalContent('Chain_Broken');
                props.setModalState(true);
            } else if(clickedElement.id === 'boltcuttersId'){
                console.log('foo')
            } else  {
                props.activate('boltcutters', false);
                props.setModalContent('Cant_Use');
                props.setModalState(true);
                console.log("props.inventory.activeItem.boltcutters", props.inventory.activeItem.boltcutters); 
            }
        }
    })
}

我的行动：

const inventoryReducer = (state = inventoryDefaultState, action) => {
    switch (action.type) {
        case 'ACTIVE':
            console.log(action)
            return {
                ...state,
                activeItem: {
                    ...state.activeItem,
                    [action.item]: action.isActive
                }
            }
        default:
            return state;
    }
}

我如何配置商店：

export default () => {
    const store = createStore(
        combineReducers({
            level: levelReducer,
            modal: modalReducer,
            inventory: inventoryReducer,
            styles: stylesReducer
        }),
        applyMiddleware(thunk)
    )
    return store;
}

我相信这就是所有需要的东西吗？如果没有，请告诉我，我已经尝试了很长时间。

截图：

Answer 1

你可以使用 React 的函数componentWillReceiveProps。这将触发像这样的重新渲染（并且还使用下一个道具/状态）：

componentWillReceiveProps(next) {
    console.log(next);
    this.inventoryItemRender(next);
}

inventoryItemRender(next){
        const inventory = next.inventory ? next.inventory : this.props.inventory;
        let inventoryItem = null;
        if(inventory.items.boltcutters){
            inventoryItem = <a className={inventory.activeItem.boltcutters ? "ghost-button items active " : "ghost-button items"} href="#" id='boltcuttersId' onClick={(next) => this.handleBoltcuttersClicked(next)}>Boltcutters</a>
        }
        return inventoryItem;
}

handleBoltcuttersClicked(props){
        this.props.activate('boltcutters', true);
        setTimeout(() => chainMechanics(props), 100)
    }