切换URL时，已从状态(MAPSTATETOPROPS)映射的卸载道具

Question

，这是场景：

• 用户登录，他们将发送/home
• /home有一个项目列表
• 单击一个项目将用户/documents/58带来数字是项目
• 此URL列出了与项目相关的所有文档
• 用户使用navbar导航回/home，然后单击另一个项目

我遇到的问题是当用户转到/documents/58时，然后导航回/home，然后单击另一个项目（例如/documents/61），它仍然显示/documents/58文档，直到服务器使用/documents/58响应。

如何清除已从redux状态（mapstatetoprops）映射的Prop的当前值？

我知道我需要使用componentWillUnmount()，只是不确定该放入什么。this.props.planning_meeting = undefined导致read-only错误。

这是我为此容器所拥有的：

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

Answer 1

从上面的评论继续，您可以将其更进一步并构建状态，以便每个项目都由唯一的ID（PM.Document）组织。

您可以在组件中访问planning_meeting[id]，其中可以从URL参数获得的id === pm.document。在这种情况下，您无需费心清理道具。

这种方法的其他好处是，您可以确保组件之间的路线过渡之间的正确数据。例如，如果您希望用户直接从/documents/1导航到/documents/2，则React路由器将不会卸载计划会议组件，因为它已在新路线中重复使用。在这种情况下，您的清晰道具逻辑将无法工作，因为componentWillUnmount不会被调用。通过通过文档ID将项目存储在状态下，您可以确保即使导航到新路线也将填充适当的数据。

这本质上可以缓存您的状态，因此，如果您打算修改状态中的数据，则需要确保定义Redux操作以相应地更新状态。