0

у меня есть компонент №1, который асинхронно получает данные с сервера и передает их другому компоненту №2 для визуализации, до того как данные переданы компоненту передаются данные, указывающие на процесс загрузки

проблема: Компонент №2 отрисовывается только один раз при первой передаче данных, а дальше, при смене данных, он отрисовывается, но входные данные в нем почему-то не изменяются.

в чём может быть дело?

компонент №1:

class Component1 extends Component<any, any> {

    // конструктор
    constructor(
        props: any
    ) {
        super(props);
    }

    // обработчик: выбран элемент графика
    handleChoice = (element: any) => {

        this.setState({
            sliceData: [{loading: true}]
        });

        console.warn('LOADING');

        to_server({}).then((output: any) => {

            console.warn('DATA');

            this.setState({
                sliceData: output.response               
            });
        });
    }

    render() {
        return (
<>
    <Chart onChoice = {this.handleChoice} />

    {
        this.state.sliceData === undefined ? <b>EMPTY</b> : this.state.sliceData[0].loading === true ? <b>LOADING</b> : <b>DATA</b>
        <Component2 data = {this.state?.sliceData} />
    }

</>

        );
    }
}

export default observer(Component1);

компонент №2:

class Component2 extends React.Component<any, any> {
    // конструктор
    constructor(
        props: any
    ) {
        super(props);

        // задать состояние компонента
        this.state = {
            data: props.data
        };
    }
   
    render() {

    return (
<>
    {this.state.data === undefined ? <i>EMPTY</i> : this.state.data[0].loading === true ? <i>LOADING</i> : <i>DATA</i>}
</>
    );
        );
    }
}

export default observer(Component2);

1 ответ 1

1

Вы передаете props в конструктор, но конструктор вызывается только 1 раз в момент создания.
Я вижу 2 варианта решения

Рендерить просто porops

class Component2 extends React.Component<any, any> {
    // конструктор
    constructor(
        props: any
    ) {
        super(props);

        // задать состояние компонента
        this.state = {
            data: props.data
        };
    }
   
    render() {

    return (
        <>
            {this.props.data === undefined ? <i>EMPTY</i> : this.props.data[0].loading === true ? <i>LOADING</i> : <i>DATA</i>}
        </>
    );
        );
    }
}

Сохранять полученный пропс в state и уже рендерить state

class Component2 extends React.Component<any, any> {
    // конструктор
    constructor(
        props: any
    ) {
        super(props);

        // задать состояние компонента
        this.state = {
            data: props.data
        };
    }
    
    componentDidUpdate(prevData) {
        // prevData - предыдущее сосотояние props, можно выполнить проверки какие либо
        setState({ data: this.props.data })
    }
   
    render() {

    return (
        <>
            {this.state.data === undefined ? <i>EMPTY</i> : this.state.data[0].loading === true ? <i>LOADING</i> : <i>DATA</i>}
        </>
    );
        );
    }
}
2
  • первый вариант сработал! хотя я его проверял кажется и он не работал - мистика!!! сейчас подключу отключенный функционал и посмотрю, что выходит, если что - попробую второй. а вообще какой подход лучше? мне вообще казалось раз изменяются входные параметры для компонента, то компонент автоматически будет пересоздан - значит ошибался
    – Zhihar
    17 окт 2022 в 8:39
  • Какой лучше... где у палки начало? Тут больше надо смотреть на то, что делает компонент. Если его задача рендер входящих данных, то можно первый оставить и не париться. Если есть логика в компоненте, то лучше пропсы в стейт загонять и уже рендерить стейт. И компонент не пересоздается! Он перерисовывается(метод render() ).
    – SwaD
    17 окт 2022 в 8:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.