Question

我见过类似的问题，但没有一个真正适用。

我的所有应用程序都会在用户点击其中一个按钮时执行get请求，并在屏幕上显示来自所述请求的数据。问题是，在我离开页面后，显示的数据仍然存在。我希望每次用户离开页面时，数据都会消失（因此只显示默认消息）

以下是我的相关代码：

// the actions.js:
export function fetchLogs(logsUrl){
    const request = axios.get(logsUrl);
    return (dispatch)=>{
        request.then(({data}) => {
            dispatch({type: 'FETCH_LOGS',
                      payload: data,
                      url: logsUrl});
        });
    }
}

//reducer-logs.js
export default function (state=null, action){
    switch(action.type){
        case 'FETCH_LOGS':
            return {data: action.payload,
                    url: action.url};
        break;
    }
    return state;
}

//reducer's index.js
const allReducers = combineReducers({
    logs:Logs,
});

//log-directories.js (where the menu is with the possible options)
class LogList extends Component{
    render(){
        var me = this;

        return (
            <ListGroup>
                <ListGroupItem
                    bsStyle="success">{this.props.directory}</ListGroupItem>
                 {logList.map(function (log, key) {
                        return (<ListGroupItem
                            onClick={()=>me.props.fetchLogs(me.state.url+"/"+log)}>
                                {log}
                            </ListGroupItem>);
                    })}
            </ListGroup>
        );
    }
}

function mapStateToProps(state){
    return {
        logs: state.logs
    }
}

function matchDispatchToProps(dispatch){
    return bindActionCreators({fetchLogs: fetchLogs}, dispatch);
}

export default connect (mapStateToProps, matchDispatchToProps)(LogList);

//where the data from fetchLogs action is displayed: log-display-panel.js
class LogPanel extends Component{
    render(){
        if(!this.props.logs){
            return (<ListGroupItem bsStyle="warning">
                Please select a log from the list to view its content.
            </ListGroupItem>);
        }
        else{
            return (
          <Panel>{this.props.logs.data}</Panel>
            );
        }

    }
}

function mapStateToProps(state){
    return{
        logs: state.logs
    };
}

export default connect(mapStateToProps)(LogPanel);

Answer 1

你可以：

对该特定组件使用React的本地状态。
在该组件中，使用React的componentWillUnmount()生命周期方法来调度触发Redux状态重置的操作。

离开页面后重置我的应用程序的redux状态

1 个答案: