Question

我创建了一个测验应用程序，该应用程序在状态正确的情况下跟踪正确的答案，即correct_answer。问题是，当用户离开一个测验并继续进行下一个测验时，测验答案仍从上一个测验中存储。

我尝试从react-router-redux使用LOCATION_CHANGE，但是我不确定我是否正确使用它。


    import { LOCATION_CHANGE } from "react-router-redux";
    const initialState = {
      questions: [],
      answers: [],
      correct_answer: []
    };

    export default function(state = initialState, action) {
      switch (action.type) {
        case "GET_QUESTIONS":
          return { ...state, questions: action.payload };
        case "GET_ANSWERS":
          return { ...state, answers: action.payload };
        case "CORRECT_ANSWER":
          return {
            ...state,
            correct_answer: [...state.correct_answer, action.payload]
          };
        case LOCATION_CHANGE:
          return {state = initialState};
        default:
          return state;
      }
    }```

The app needs to clear the correct_answers state anytime the user moves away from the page.

Answer 1

请记住，redux存储是无所不在的数据结构。无论您的应用程序中是否有任何ui更改，数据都将持续存在，包括组件中的本地状态更改以及安装/卸载组件（除非您拆除了reducer，但这根本不是您要做的事情）。

如评论中所述，清除状态是您的工作。创建一个将复位减速器的动作。如何实现它取决于您对测验组件的确切实现。

切换测验时如何进行安装/卸载/道具更改？您是要安装一个全新的组件还是要向现有组件中提供新数据？

如果下一个测验是一个全新的实例，则在卸载上一个测验时会调用它：

componentWillUnmount() {
  this.props.resetQuizState() // your action that resets the data in your store
}

如果它是相同的组件，但是传入了新的道具：

handleNextQuizClick() {
  this.props.resetQuizState()
  // and then rest of data manipulation/calling/parsing
}

render() {
  return (
    <button onClick={this.handleNextQuizClick}>
      next quiz
    </button>
}

离开页面时如何清除状态

1 个答案: