у меня есть компонент №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);