Question

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

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

我是React的新手，也很少开发前端。谁能告诉我我在哪里做错了？

组件A：

let section = NSCollectionLayoutSection(group: group)
section.orthogonalScrollingBehavior = .groupPagingCentered

section.visibleItemsInvalidationHandler = { (visibleItems, point, env) -> Void in
   print(point)
}

组件B：

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>

  );
  }
}

Answer 1

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

this._onButtonClick

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

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

1 个答案: