В компоненте A у меня есть btn с поисковыми фильтрами. После нажатия btn я отправляю выбранные значения из поисковых фильтров в компонент B, где он получает данные из API и отрисовывает информацию с помощью таблицы.
Таким образом, проблема, с которой я сталкиваюсь, заключается в следующем: при первом нажатии btn все выбранные значения передаются компоненту B, а также данные отображаются, но при нажатии btn во второй раз после изменения значений поискового фильтра btn fun c не работает , Я также проверил в консоли, отображая журналы в компоненте B. Я могу видеть только 1-й журнал вызовов, но не 2-й вызов.
Я новичок в React и также редко разрабатываю интерфейс. Может кто-нибудь сказать, где я делаю ошибку?
Компонент A:
class Hook extends React.Component<any ,any > {
constructor(props) {
super(props);
this._onButtonClick = this._onButtonClick.bind(this);
this.state = {
showComponent: false,
};
};
_onButtonClick() {
this.setState({
showComponent: true,
});
}
render() {
const {classes} = this.props;
return (
<div>
<Box border={1} className={classes.root} display="flex" >
<div>
<Button variant="contained" color="primary"
onClick={this._onButtonClick}>
Search
</Button>
</div>
</Box>
{this.state.showComponent ?
<BComponent a = {this.state.dropdown1value} b = {this.state.dropdown2value} c = {this.state.dropdown3value} d = {this.state.dropdown4value}/>
: null }
</div>
);
}
}
Компонент B:
class BComponent extends React.Component<any ,any > {
constructor(props) {
super(props);
this.getAPIInfo = this.getAPIInfo.bind(this);
this.state = {
result: { allInfo: [] },
};
}
componentDidMount() {
this.getAPIInfo(this.props.a,this.props.b,this.props.c,this.props.d).then(Response => {this.setState({result: Response })});
this.setState({loaderFlag: true});
}
async getAPIInfo(a, b, c, d) {
let res;
try {
calling API
});
} catch (error) {
console.log("API call error", error);
} this.setState({loaderFlag: false});
return res;
}
render() {
const {classes} = this.props;
if(this.state.loaderFlag) {
return (
<Loader /> );
}
else
return (
Rendering API data through material UI table
);
}
}
export default withStyles(useStyles)(BComponent)