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

在我的React应用程序中，我有两个组件，主组件和菜单组件。主组件是菜单的父组件。菜单显示了一个项目列表，单击其中一个项目后，它会在我作为道具传递给菜单的函数的帮助下更新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;

类主扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
菜：菜，
selectedDish:null
};
this.selectDish=this.selectDish.bind（this）；
}
选择盘（dishId）{
this.setState（{selectedDish:dishId}）；
}
render（）{
返回(
);
}
}
导出默认主；

下面是菜单组件：

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;

类菜单扩展组件{
建造师（道具）{
超级（道具）；
this.selectdish=this.selectdish.bind（this）；
}
选择盘（dishId）{
返回这个.props.onClick（dishId）；
}
render（）{
const menu=this.props.disks.map（（dish）=>{
返回(
);
});
}
}
导出默认菜单；

我省略了代码中一些不相关的部分。 因此，工作流程应该是，当我们单击菜单呈现的一道菜时，该菜的id应该传递回Main并更新状态变量“selectedDish”，如方法

selectDish

所示

但是在浏览器控制台中，我得到一个错误，即在现有状态转换期间无法更新

。
奇怪的是，如果我不传递任何盘子id，并将
selectedDish
设置为固定值，如1，则一切正常

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

谢谢大家!
 您没有通过卡a函数的
onClick
，但您已经通过
this调用了该函数。选择dish（dish.id）
。这将在渲染时而不是单击时启动流

你有三个选择

您可以将其包装在一个附加函数中，如下所示：
onClick={（）=>{this.selectdish（dish.id）}>
。这样，您将向onClick传递一个函数，这是必需的，而不是执行该函数

或者让
选择dish
返回如下函数：

 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;

类菜单扩展组件{
建造师（道具）{
超级（道具）；
this.selectdish=this.selectdish.bind（this）；
}
选择菜（活动）{
返回this.props.onClick（event.target.name）；
}
render（）{
const menu=this.props.disks.map（（dish）=>{
返回(
//现在，这是不调用它的函数
);
});
}
}
导出默认菜单；
您的代码中有一些问题：

属性
键
必须在根目录中定义

菜单组件中的render方法不返回任何内容
-

类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
this.selectdish=this.selectdish.bind（this）；
}
选择盘（dishId）{
返回这个.props.onClick（dishId）；
}
render（）{
返回此.props.disks.map（dish=>{
返回(
this.selectdish（dish.id）}>{dish.id}
);
});
}
}

查看我解决此问题的游乐场：

我已经删除了该部分。谢谢你的回答，但是为什么你说该函数将在渲染期间执行呢。在普通javascript中，我们自己就是这样做的。this.selectdish（dish.id）将执行一个函数，对吗？所以onClick={this.selectdish（dish.id）}>也将在renderwhy on render上执行函数，它应该在单击时执行。还有一件事，为什么我们要在selectdish中返回函数。为什么我们不能调用函数呢？因为无论何时编写function（），都要执行它。而你正在这样做。您需要将其包装在一个附加函数中，并将该函数传递给单击时要执行的onClick，
class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.selectdish = this.selectdish.bind(this);
  }
  selectdish(dishId) {
    return this.props.onClick(dishId);
  }

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