JavaScript, Redux: массив не принимает значения - PullRequest
Новая
       2

JavaScript, Redux: массив не принимает значения

0 голосов
/ 23 марта 2020

Я пытаюсь получить статистику и проблемы для пользователя с помощью действия Redux и передать его компоненту React. Проблема в том, что у меня есть массив объектов curPageExercisesMarked, который я использую для разбивки на страницы, но он не принимает значения, которым я его назначаю.

Более странно то, что другие поля в магазине Redux обновляйся, но не этот. Я попытался утешить объект в действии, но он просто печатает это: Array of object in console

Важно отметить, что я делаю нечто подобное в другом действии, используя точно такое же назначение и это работает там. Я потерял уже час, пытаясь разобраться в этом, поэтому любая помощь приветствуется.

Действие Redux: 

export const setStatistics = (
problems,
problemsSolved,
filter = ''
) => dispatch => {
let payload = {
subject1: 0,
subject2: 0,
subject3: 0,
total: 0,
exercisesMarked: [],
curPageExercisesMarked: []
};
for (let i = 0; i < problems.length; i++) {
  if (problems[i].S === '1' && problemsSolved.includes(problems[i]._id)) {
   payload.subject1++;
   payload.total++;
   payload.exercisesMarked.push(problems[i]);
  } else if (
   problems[i].S === '2' &&
   problemsSolved.includes(problems[i]._id)
  ) {
   payload.subject2++;
   payload.total++;
   payload.exercisesMarked.push(problems[i]);
  } else if (
   problems[i].S === '3' &&
   problemsSolved.includes(problems[i]._id)
  ) {
   payload.subject3++;
   payload.total++;
   payload.exercisesMarked.push(problems[i]);
  }
 }

 payload.curPageExercisesMarked = payload.exercisesMarked.slice(0, 10);

 dispatch({
  type: SET_USER_STATISTICS,
  payload
 });
};

Редуктор: 

export default function(state = initialState, action) {
const { type, payload } = action;
switch (type) {
case SET_USER_STATISTICS:
  return {
    ...state,
    exercisesMarked: payload.exercisesMarked,
    curPageExercisesMarked: payload.curPageExercisesMarked,
    subject1: payload.subject1,
    subject2: payload.subject2,
    subject3: payload.subject3,
    total: payload.total
  };
 case CHANGE_PAGE_MARKED:
  return {
    ...state,
    page: payload,
    curPageExercisesMarked: state.exercisesMarked.slice(
      (payload - 1) * state.pages_count,
      payload * state.pages_count
    )
  };
 default:
  return state;
 }
}

Эта часть не работает: payload.curPageExercisesMarked = payload.exercisesMarked.slice(0, 10);

РЕДАКТИРОВАТЬ

Я обнаружил, что если я go компонент, который загружает все проблемы и вернитесь к этому компоненту, он на самом деле получает правильное значение. Интересно, что и здесь у меня такие же проблемы. Это способ, которым я использую React Hook?

Это та часть, где я называю действие приставки в компоненте реагирования: 

const Dashboard = ({
problems: { problems },
auth: { user },
getProblems,
dashboard: {
curPageExercisesMarked,
page,
exercisesMarked,
pages_count,
subject1,
subject2,
subject3,
total
},
setStatistics
}) => {
useEffect(() => {
 if (problems === null) {
   getProblems();
 } else if (user !== null) {
   setStatistics(problems, user.problemsSolved);
 }
}, [problems, user]);
// rest of the code
}

1 Ответ

1 голос
/ 23 марта 2020

Вы можете сначала упростить код, как показано ниже. Обновить / Распечатать console.log(JSON.stringify(payload)). Я думаю if(problemsSolved.includes(problems[i]._id)) не работает должным образом 

export const setStatistics = (
  problems,
  problemsSolved,
  filter = ""
) => dispatch => {
  let payload = {
    subject1: 0,
    subject2: 0,
    subject3: 0,
    total: 0,
    exercisesMarked: [],
    curPageExercisesMarked: []
  };
  for (let i = 0; i < problems.length; i++) {
    if(problemsSolved.includes(problems[i]._id)) {
      payload["subject"+ problems[i].S]++
      payload.total++;
      payload.exercisesMarked.push(problems[i]);
    }
  }
  payload.curPageExercisesMarked = payload.exercisesMarked.slice(0, 10);

  dispatch({
    type: SET_USER_STATISTICS,
    payload
  });
};

// Также 

case SET_USER_STATISTICS:
  return {
    ...state,
    ...payload
  };
...