时间戳

首页 > 解决方案 > 调用时操作不更新减速器

reactjs - 调用时操作不更新减速器

问题描述

我无法让我的减速器更新。this.completeQuiz(id)当我在调试器中触发但我的状态没有更新时，我可以进入操作。有任何想法吗？ 

import {
  submitAnswer,
  resetQuiz,
  nextQuestion,
  completeQuiz
} from "../actions/videos";
class TestYourselfScreen extends React.Component {

  constructor(props) {
    super(props);
    this.onCapture = this.onCapture.bind(this);
  }

  completeQuiz = id => {
    let video = this.props.videos.find(obj => obj.id == id);
    let correctAnswers = video.results.correctAnswers;
    const questionsFiltered = video.questions.filter(obj => obj.question != "");
    completeQuiz({
      id,
      totalScore: correctAnswers.length / questionsFiltered.length
    });
  };

  render() {
  .....

    return (
        {questionsFiltered.length > 0 && !completed && (
          <View
            style={{
              flex: 1
            }}
          >
            ....

            <Button
              title={lastQuestion ? "Finish" : "Next"}
              buttonStyle={[styles.button]}
              disabled={
                !results.correctAnswers.includes(current) &&
                !results.incorrectAnswers.includes(current)
                  ? true
                  : false
              }
              onPress={() =>
                lastQuestion ? this.completeQuiz(id) : this.next(id, current)
              }
            />
          </View>
        )}

        {completed === true && (
          <View
            style={{
              flex: 1
            }}
          >
            <ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 }}>
             ...
          </View>
        )}
      </ScrollView>
    );
  }
}

const mapStateToProps = state => {
  return {
    videos: state.tcApp.videos
  };
};
const mapDispatchToProps = dispatch => ({
  submitAnswer: data => dispatch(submitAnswer(data)),
  resetQuiz: id => dispatch(resetQuiz(id)),
  nextQuestion: data => dispatch(nextQuestion(data)),
  completeQuiz: data => dispatch(completeQuiz(data))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TestYourselfScreen);

行动：

export const completeQuiz = data => ({
    type: "COMPLETE",
    data
});

减速器：

import { trimText } from "../helpers";

export function tcApp(
  state = { videos: [], search: { videos: [], term: "" } },
  action
) {
  switch (action.type) {

 ....
    case "COMPLETE": {
      const { completed, totalScore, id } = action.data;

      return {
        videos: state.videos.map(video =>
          video.id === id
            ? {
                ...video,
                results: {
                  totalScore
                },
                completed: true
              }
            : video
        ),
        search: { term: "", videos: [] }
      };
    }

    default:
      return state;
  }
}

标签： reactjsredux

解决方案

我认为您的动作可以通过道具获得

 completeQuiz = id => {
let video = this.props.videos.find(obj => obj.id == id);
let correctAnswers = video.results.correctAnswers;
const questionsFiltered = video.questions.filter(obj => obj.question != "");
this.props.completeQuiz({
  id,
  totalScore: correctAnswers.length / questionsFiltered.length
});
};

因为我们 mapDispatchToProps

希望能帮助到你

推荐阅读