Компонент не обновляется после запуска mapStateToProps - PullRequest
Новая
       12

Компонент не обновляется после запуска mapStateToProps

0 голосов
/ 24 мая 2019

Компонент сохраняет ваш ответ на вопрос при нажатии и повторно отображает, чтобы показать выбранный ответ.Или, по крайней мере, это и есть цель.

Действие запускается, данные передаются в редуктор, и в конце концов mapStateToProps запускается с обновленными данными.Все это работает, но не выполняет повторную визуализацию компонента.

Моя конфигурация довольно проста и работала в прошлом.Я старался не изменять состояние и перепроверил имена переменных, но компонент все равно не будет перерисовываться.

Действие 

  // SAVE ANSWERS 
  export function saveAnswer(answer, questionNum) {
    return (dispatch, getState) => {
      const { answers } = Object.assign({}, getState());
      let newAnswers = answers
      newAnswers[questionNum] = answer

      dispatch({ 
        type: actionTypes.SAVE_ANSWER,
        answers: newAnswers
    })
    }
  }

Редуктор 

export const reducer = (state = initialState, action) => {
    let newState = Object.assign({}, state);
    switch (action.type) {

        case actionTypes.SAVE_ANSWER:
            newState.answers = action.answers
            return newState

        default:
        return state
  }
}

Компонентное соединение 

...
//Connect Redux
const mapStateToProps = (state) => {
    console.log('mapped', state)
    return {
      settings: state.settings,
      answers: state.answers
    }
  }
  const mapDispatchToProps = { saveAnswer }

  const connectedQuestion = connect(mapStateToProps, mapDispatchToProps)(Question)

  export default connectedQuestion;

Головка компонента 

class Question extends React.Component{

    constructor( props ) {
        super( props );

        this.clickedAnswer = this.clickedAnswer.bind( this );
    }

    static async getInitialProps ({query}) {
        return {query}
    }

    render() {
        console.log('rendered', this.props.answers)
        const {settings, query} = this.props
        const currentNumber = parseInt(query.number)
        const currentAnswer = this.props.answers[currentNumber]

        const question = settings.questions[currentNumber - 1] || {}
...

Новое редактирование

Я добавил строку в функцию mapStateToProps, чтобы вызватьповторная визуализация.Это работает (но, очевидно, очень неправильно) и доказывает, что Redux connect не видит сделанные изменения. 

const mapStateToProps = (state) => {
    return {
      settings: state.settings,
      answers: state.answers,
      rand: Math.random()
    }
  }

Хотя, когда я регистрирую состояние в этой функции, ответы явно переходят от [] к [{Answer}].

...