javascript - 调用 Redux 操作时 Prop 不会更新

Question

只是一个免责声明 - 当我的主要组件中的功能有问题时，我的代码可以工作。在我将其导出后，它不再按应有的方式运行。我的理论是因为不知何故 Prop 没有正确更新。

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

我该如何解决这个问题？也许有一种方法可以让函数将 store 作为参数而不是 props ？或者我不正确地调用操作或者我完全丢失了一些东西？

代码如下:

主要组成部分(相关部分？):

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。这将触发像这样的重新渲染(并且还利用下一个 Prop /状态):

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