Question

在我的应用中，我在我的Dashboard组件中将一组播放列表发送到我的redux商店

render() {
    this.getPlaylists();
    return (
        <div>
            <h1>Dashboard</h1>
            <Playlists playlists={this.state.playlists}/>
            <button onClick={this.handleOnClick}><a>Let's start!</a></button>
        </div>
    );
}

并且handleOnClick只调用调度函数。

然后，我检查我的redux商店，看看播放列表是否真的在那里，他们是。但是，当我转到新路由并在redux存储区内获取状态信息时，即使我在切换页面之前检查了数组是否在存储中，所有内容都会恢复为默认值。有谁知道为什么会这样？

编辑：这是我的减速机

const playlistReducerDefaultState = {
    playlists: []
};

export default function(state = playlistReducerDefaultState, action) {
    console.log('reducer state', action);
    switch (action.type) {  
        case 'PLACE_PLAYLISTS':
            return {
                playlists: action.playlists
            }
        default:
            return state;
    };
};

编辑：这是仪表板组件的代码

const spotifyapi = new SpotifyWebApi();

class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.handleOnClick = this.handleOnClick.bind(this);
        this.state = {
            playlists: []
        };
    }

async getPlaylists() {
    if (this.props.auth.user) {
        spotifyapi.setAccessToken(this.props.auth.user.accessToken);
        const playlists = await spotifyapi.getUserPlaylists(this.props.auth.user.spotifyId);
        this.setState(() => {
            return {
                playlists: playlists.items
            }
        })
    }
}

handleOnClick(e) {
    console.log('current props: ', this.props);
    this.props.dispatch(placePlaylists(this.state.playlists));
}

render() {
    this.getPlaylists();
    return (
        <div>
            <h1>Dashboard</h1>
            <Playlists playlists={this.state.playlists}/>
            <button onClick={this.handleOnClick}><a>Let's start!</a></button>
        </div>
        );
    }
};

const mapStateToProps = (state) => {
    return {
        auth: state.auth,
        playlists: state.playlists
    }
}

export default connect(mapStateToProps)(Dashboard);

此外，这是我的路由器

return (
        <div>
            <BrowserRouter>
                <div>
                    <Header />
                    <Route exact path="/" component={Landing} />
                    <Route path="/dashboard" component={Dashboard}/>
                    <Route path="/active" component={Active}/>
                </div>
            </BrowserRouter>
        </div>
    )

我的组件收集仪表板中的播放列表数据并将该数据放入商店。但是，当我转到/ active路径时，该数据会消失。一位评论者表示，redux状态不会持续跨页面加载。如何在没有新页面加载的情况下从一条路线转到另一条路线？

在页面更改之间丢失redux状态

0 个答案: