React中第二次单击按钮功能不起作用

Question

在组件A中，我有一个带有搜索过滤器的btn，单击btn后，我将从搜索过滤器中选择的值发送到组件B中，在组件B中，它从api获取数据并使用表呈现信息。

因此面临的问题是，在第一次单击btn时，所有选定的值都将传递到组件B，并且还在渲染数据，但是当在更改搜索过滤器值后第二次单击btn时，btn函数无法正常工作。我还通过在组件B中显示日志在控制台中进行了检查。我只能看到第一个通话记录，而看不到第二个通话记录。

谁能告诉我我在哪里做错了吗？

组件A：

<Button variant="contained" color="primary" 
           onClick={this._onButtonClick}>
                   Search
           </Button>

{this.state.showComponent ?
                        <BComponent a = {this.state.dropdown1value} b = {this.state.dropdown2value} c = {this.state.dropdown3value} d = {this.state.dropdown4value}/>
                           : null

                      }

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)

Answer 1

理想情况下，ComponentB应该是一个哑/表示组件，并且Component A应该获取数据并将其作为道具发送给ComponentB。

this._onButtonClick

然后应该从API提取数据，并将其传递给componentB进行显示。