时间戳

首页 > 解决方案 > 无法将简化函数传递给 onClick 事件处理程序 ReactJs

reactjs - 无法将简化函数传递给 onClick 事件处理程序 ReactJs

问题描述

在我的 React 应用程序中，我有两个组件，主组件和菜单组件。Main Component 是 Menu 的父组件。Menu 显示一个项目列表，单击其中一个项目时，它会借助我作为道具传递给 Menu 的函数更新 Main 的状态。下面是代码以便更好地理解：

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dishes: dishes,
            selectedDish: null
        };
        this.selectDish=this.selectDish.bind(this);
      }

      selectDish(dishId){
        this.setState({ selectedDish: dishId});
      }


  render() {
    return (
      <div className="App">
        <Menu dishes={this.state.dishes} onClick={this.selectDish} />
      </div>
    );
  }
}

export default Main;

下面是菜单组件：

class Menu extends Component {

    constructor(props){
        super(props);
        this.selectdish=this.selectdish.bind(this);
    }
    selectdish(dishId){
        return this.props.onClick(dishId);
    }

    render() {
        const menu = this.props.dishes.map((dish) => {
            return (
                <div className="col-12 col-md-5 m-1">
                <Card key={dish.id}
                  onClick={this.selectdish(dish.id)}>
                </Card>
              </div>
            );
        });

    }
}

export default Menu;

我省略了代码中一些不相关的部分。所以工作流程应该是，当我们点击菜单呈现的菜品之一时，菜品的 id 应该传回 Main 并更新状态变量 ``selectedDish```，如方法中所示selectDish。

但是在浏览器控制台中，我得到了错误Cannot update during existing state transition。奇怪的是，如果我不传递任何菜 id 并将其设置selectedDish为固定值（如 1），一切正常。

请帮我确定我的事件处理程序是否有任何问题，因为这是唯一似乎包含错误的部分。

谢谢你！

标签： reactjs

解决方案

您没有将onClickCard 的 传递给函数，但您已经在使用 调用该函数this.selectdish(dish.id)。这将在渲染时启动流程，而不是在点击时启动。

你在这里有三个选择。

您可以将其包装在这样的附加函数中：onClick={() => {this.selectdish(dish.id)}}>. 这样，您将一个函数传递给 onClick，这是必需的，而不是执行它。

或者你让selectdish返回一个这样的函数：

 selectdish(dishId){
    return () => {this.props.onClick(dishId)};
}

或者您向卡片添加名称并从点击事件中访问元素的名称：

class Menu extends Component {

constructor(props){
    super(props);
    this.selectdish=this.selectdish.bind(this);
}
selectdish(event){
    return this.props.onClick(event.target.name);
}

render() {
    const menu = this.props.dishes.map((dish) => {
        return (
            <div className="col-12 col-md-5 m-1">
            <Card key={dish.id}
              name={dish.id}
              onClick={this.selectdish}> // this is now the function without calling it
            </Card>
          </div>
        );
    });

}
}

export default Menu;

推荐阅读