Поддерживает ли React пакетные обновления в некоторых случаях? - PullRequest
Новая
       6

Поддерживает ли React пакетные обновления в некоторых случаях?

0 голосов
/ 23 октября 2018

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

У меня есть эквивалент следующего кода: 

// Connected component
class MyComponent extends React.Component {
    state = {
        shouldDisplayError: false,
    };

    componentDidUpdate(prevProps) {
        console.log("componentDidUpdate: " + this.props.dataState);
        if (
            prevProps.dataState === "FETCHING" &&
            this.props.dataState === "FETCH_FAILED"
        ) {
            this.setState(() => ({ shouldDisplayError: true }));
        }
    }

    render() {
        return this.state.shouldDisplayError && <p>Awesome error message!</p>;
    }
}

const mapStateToProps = (state) => {
    const dataState = getMyDataStateFromState(state);
    // dataState can be "NOT_INITIALIZED" (default), "FETCHING", "FETCH_SUCCEEDED" or "FETCH_FAILED"
    console.log("mapStateToProps: " + dataState);
    return {
        dataState,
    };
};

export default connect(mapStateToProps)(MyComponent);

// A thunk triggered by a click in another component:
export async const myThunk = () => (dispatch) => {
    dispatch({ type: "FETCHING_DATA" });
    let result;
    try {
        result = await API.getData(); // an error thrown immediately inside of here
    } catch (error) {
        dispatch({ type: "FETCHING_DATA_FAILED" });
        return;
    }
    dispatch({type: "FETCHING_DATA_SUCCEEDED", data: result.data});
}

// Let's say this is the API:
export const API = {
    getData: () => {
        console.log("> api call here <");
        throw "Some error";  // in a real API module, there's a check that would throw in some cases - this is the equivalent for the unhappy path observed
        // here would be the fetch call
    },
}

я бы ожидал увидеть в консоли после запуска вызова API (, который немедленно завершается ошибкой ), следующее: 

mapStateToProps: FETCHING
componentDidUpdate: FETCHING
> api call here <
mapStateToProps: FETCH_FAILED
componentDidUpdate: FETCH_FAILED

Однако вместо этого я вижу следующее: 

mapStateToProps: FETCHING
> api call here <
mapStateToProps: FETCH_FAILED
componentDidUpdate: FETCH_FAILED

Таким образом, компонент MyComponent никогда не получал "FETCHING" dataState, хотя это было замечено в функции mapStateToProps.И при этом никогда не отображается сообщение об ошибке.Зачем?Это потому, что такие быстрые обновления компонента props пакетируются с помощью React (например, вызовы this.setState() в некоторых случаях) ???

По сути, вопрос таков: если я отправляю два действиядействительно быстро, один за другим, вызывая обновления реквизита компонента, React пакетирует их, фактически игнорируя первый?

1 Ответ

0 голосов
/ 23 октября 2018

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

...