Reactjs 切换URL时卸载已从状态映射的道具（mapStateToProps）

下面是一个场景：

• 用户登录并发送到

  /home

• /home

  有一个项目列表
• 点击一个项目会给用户带来编号为项目的

  /documents/58

• 此URL列出了与项目关联的所有文档
• 用户使用

  navbar

  导航回

  /home

  ，然后单击另一个项目

我遇到的问题是，当用户转到

/documents/58

，然后导航回

/home

，然后单击另一个项目（例如

/documents/61

），它仍然显示

/documents/58

文档，直到服务器响应

/documents/58

如何清除从Redux state（mapStateToProps）映射的道具的当前值？

我知道我需要使用

组件willunmount（）

，只是不确定要放什么

this.props.planning\u meeting=未定义

会导致

只读

错误

以下是我为这个容器准备的：

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

class PlanningMeeting extends Component {

    componentWillUnmount() {
        this.props.planning_meeting = undefined;
    }

    renderDocuments() {
        const { planning_meeting } = this.props;

        if (!planning_meeting) {
            return <div>Loading...</div>
        }

        if (_.isEmpty(this.props.planning_meeting)) {
            return (
                <li>Nothing at this time.</li>
            );
        } else {
            return _.map(this.props.planning_meeting, pm => {
                return (
                    <li key={pm.document}>
                        <Link to={`/documents/${pm.document}`}>{pm.document}</Link>
                    </li>
                );
            });
        }
    }

    render() {

        return (
            <div className='panel panel-default'>
                <div className='panel-heading'>
                    <h4><strong>Planning Meeting</strong></h4>
                </div>

                <div className='panel-body'>
                    <ul className='survey-list'>{this.renderDocuments()}</ul>
                </div>
            </div>
        ); 
    }
}

function mapStateToProps(state) {
    return {
        planning_meeting: state.documents.planning_meeting
    }
}

export default connect(mapStateToProps)(PlanningMeeting);

从“lodash”导入； 从“React”导入React，{Component}； 从'react redux'导入{connect}； 从'react router dom'导入{Link}； 类计划会议扩展了组件{ 组件将卸载（）{ this.props.planning_meeting=未定义； } 渲染文档（）{ const{planning_meeting}=this.props； 如果（！计划会议）{ 返回加载。。。 } 如果（uu.isEmpty（本次计划会议））{ 返回(

现在什么都没有

); }否则{ return\uu.map（this.props.planning\u会议，pm=>{ 返回(

{pm.document}

); }); } } render（）{ 返回( 计划会议

{this.renderDocuments（）}

); } } 函数MapStateTops（状态）{ 返回{ 计划会议：状态文件计划会议 } } 导出默认连接（MapStateTops）（计划会议）；

---

继续上面的评论，您可以进一步构建您的状态，以便每个项目都由一个唯一的id（pm.document）组织

然后，您可以访问组件中的

planning\u meeting[id]

，其中

id==pm.document

，您可以从url参数获取该文件。在这种情况下，你不需要费心清理道具

这种方法的另一个好处是，您可以确保组件在到自身的路由转换之间具有正确的数据。例如，如果您希望用户直接从

/documents/1

导航到

/documents/2

，react router将不会卸载PlanningMeeting组件，因为它在新路由中重复使用。在这种情况下，您的clear props逻辑将不起作用，因为不会调用

componentWillUnmount

。通过按文档id以状态存储项目，可以确保即使在导航到新路线时也会填充适当的数据

---

这实际上是在缓存您的状态，因此如果您计划修改状态中的数据，您需要确保定义redux操作以相应地更新状态。

在

组件将卸载

中，您将不得不调度redux操作，该操作将从redux存储中删除数据。哎呀，我真的没有想到这一点。将在

组件willunmount（）

中放置

this.props.clearProps（）

，以清除存储。谢谢