Question

我正在此页面中创建redux状态：

import random

def game():
    number = random.randint(0, 10)
    guess = 0
    print("Guess a number from 0-10:")
    while number != guess:
        try:
            guess = int(input(""))
            if number != guess:
                print("you haven't guessed the number, keep trying")
            else:
                print("You guessed it!")
                break
        except ValueError:
            print("Please enter an integer")

game()

choose = input("Would you like to play again?\n")
while choose == "yes":
    game()
    if choose == "no":
        break

我仍然可以在此页面的Redux中看到数据import React from 'react'; import { connect } from 'react-redux'; import styled from 'styled-components'; import wrapper from '../redux/store'; import Container from '../components/Container/Container'; import Card from '../components/Card/Card'; import Circle from '../components/Circle/Circle'; import PieChart from '../components/PieChart/PieChart'; import Accordion from '../components/Accordion/Accordion'; import RadioButton from '../components/Ui/RadioButton/RadioButton'; import { manageList, reportList } from '../components/helper'; import { getManageListAndCategoryId } from '../redux/actions/actions'; const Panel = ({ manageProductsList }) => ( <> {console.log(manageProductsList)} <MainContainer> <Title>Управление</Title> <ContainersWrapper> {manageProductsList.map((item, index) => <Card key={index} title={item.title} type="service" serviceName={item.value} />)} </ContainersWrapper> <SecondSection> <CustomContainer> <Title>Отчетность</Title> <p>Показатели за:</p> Здесь будут ТАБЫ <ContainersWrapper> {reportList.map((item, index) => <Card key={index} item={item} type="report" />)} </ContainersWrapper> <DiagreammWrapper> <PieChart /> <Circle percent={20} /> <Circle percent={87} /> <Circle percent={30} /> <Circle percent={47} /> </DiagreammWrapper> </CustomContainer> </SecondSection> <CustomContainer> <TitleTwo>Доступные отчеты</TitleTwo> <Accordion /> <RadioButton /> </CustomContainer> </MainContainer> </> ); export const getStaticProps = wrapper.getStaticProps(async ({ store }) => { store.dispatch(getManageListAndCategoryId(manageList)); }); const mapStateToProps = (state) => ({ manageProductsList: state.mainReducer.manageProductsList, }); export default connect(mapStateToProps, null)(Panel);（screenshot）。但是当我导航到另一个动态路线页面 manageProductsList

时

forms/[id.tsx]

import React from 'react'; import { connect } from 'react-redux'; import wrapper from '../redux/store'; import { util, manageList, reportList } from '../../components/helper'; import { getManageListAndCategoryId } from '../../redux/actions/actions'; export async function getStaticPaths(categoryIds) { console.log('categoryIds', categoryIds); //temporarely make static path data while categoryIds is undefined const paths = [ { params: { id: 'object' } }, { params: { id: 'service' } }, { params: { id: 'club_cards' } }, { params: { id: 'schedule' } }, { params: { id: 'agents' } }, { params: { id: 'abonements' } }, { params: { id: 'price_category' } }, { params: { id: 'person_data' } }, { params: { id: 'roles' } }, ]; return { paths, fallback: false, }; } export async function getStaticProps({ params, manageProductsList }) { // const postData = util.findFormData(params.id, manageProductsList); const postData = { title: 'asdsadasdsad' }; return { props: { postData, }, }; } const Form = ({ manageProductsList }) => ( <div> {console.log(manageProductsList)} {/* {postData.title} */} dasdsadsad </div> ); const mapStateToProps = (state) => ({ categoryIds: state.mainReducer.categoryIds, manageProductsList: state.mainReducer.manageProductsList, }); export default connect(mapStateToProps, null)(Form);和manageProductsList是空数组（screenshot 2）我正在使用本机categoryIds组件来浏览页面

这是Link from next/link组件，可导航到动态页面：

Card

如果有人可以帮助我，我将非常感激

Answer 1

您的<Link>将导致服务器端呈现，您可以在导航到另一个页面时观察浏览器选项卡是否正在加载。如果是这样，页面将重新加载，并且redux state将刷新。

official docs显示了使用动态路由的正确方法。

<Link href="/forms/[id]" as={`/forms/${serviceName}`}>

导航到Next.js中的另一个页面时Redux失去状态

1 个答案: