Как получить обновленное состояние в методе? (Реагировать и Redux) - PullRequest
Новая
       7

Как получить обновленное состояние в методе? (Реагировать и Redux)

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

Я новичок в React и Redux, так что это может быть совершенно неправильный способ go о вещах, но я пытаюсь получить обновленное состояние в методе onSubmit.

Это это простое приложение с карточками, и я хочу получить предложение от пользователя (userInput) и сравнить его с правильным предложением (generated). Я могу получить список правильных и неправильных слов на основе их представления (выполненного с помощью действия compareInput()), который я вижу в состоянии Redux, но он не обновляется до полного запуска метода, поэтому В настоящее время он настроен, начальная длина векторов correct и wrong равна 0.

Как я могу получить обновленное состояние в методе? Или есть лучший способ сделать это? Я могу сделать это в componentDidUpdate, но, так как состояние обновляется с каждым изменением формы, я подумал, что было бы излишними накладными расходами вычислять правильный процент (pctCorrect) каждого обновления.

Спасибо за тонну !

Input.js: 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {
    compareInput, generateSentence, trackProgress
} from '../../actions/learn';

export class Input extends Component {

    state = {
        userInput: '',
        progress: { submissions: 0, pctCorrect: 1 },
    }

    onSubmit = e => {
        e.preventDefault();
        const { sentence } = this.props.sentence;
        const { userInput } = this.state;
        this.props.compareInput({
            'generated': sentence,
            'user_input': userInput,
        });
        this.props.generateSentence();
        this.setState({ userInput: '' })

        this.props.trackProgress({
            progress: {
                submissions: this.props.progress.submissions + 1,
                pctCorrect: this.props.correct.length / (
                    this.props.correct.length + this.props.wrong.length
                )
            },
        })

        render() { };

        const mapStateToProps = state => ({
            sentence: state.learnReducer.sentence,
            progress: state.learnReducer.progress,
            correct: state.learnReducer.correct,
            wrong: state.learnReducer.wrong,
        })

        export default connect(mapStateToProps, {
            compareInput, generateSentence, trackProgress
        })(Input);

1 Ответ

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

Компоненты React не могут получить доступ к новым значениям из реквизита, пока они не выполнят повторную визуализацию. Не имеет значения, является ли это компонентом класса или функции, или компонент отправляет действие Redux или обратный вызов от родителя. React еще не смог выполнить рендеринг к моменту запуска следующей строки, и props все равно будет указывать на существующие реквизиты.

Если вам абсолютно необходим доступ к последним значениям из Хранилище Redux сразу после отправки действия, переместите логи c в thunk, чтобы иметь доступ к getState: 

// An example of checking state after a dispatch
function checkStateAfterDispatch() {
    return (dispatch, getState) => {
        const firstState = getState();
        dispatch({type : "FIRST_ACTION"});

        const secondState = getState();

        if(secondState.someField != firstState.someField) {
            dispatch({type : "SECOND_ACTION"});
        }    
    }
}
...