Javascript 第一次单击时，单击“React onClick”不触发，第二次单击即可

我正在使用两个组件，如第一个组件和第二个组件。SecondComponent正在FirstComponent上渲染。我将hanldeClick（）函数从第一个组件发送到第二个组件但hanldeClick（）函数在第一次单击时不响应

我的代码：

//First Component 
export function FirstComponent(props) {
  const handleClick = () => {
    console.log('please response');
  };
  return (
    <div>
      <SecondComponent handleClick ={handleClick } />
    </div>
  );
}

//Second Component
export function SecondComponent(props) {
  const { handleClick } = props;

  return (
    <div>
      <Table>
        <TableBody>
          {mayArray.map(file => (
            <TableRow key={Math.random()}>
......................
              <TableCell>
                <Button
                  onClick={() => {
                    hanldeClick();
                  }}>
                  Cros
                </Button>
              </TableCell>
..........................
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

//第一个组件
导出功能组件（道具）{
常量handleClick=（）=>{
console.log（'please response'）；
};
返回(
);
}
//第二部分
导出功能组件（道具）{
const{handleClick}=props；
返回(
{mayArray.map（文件=>(
......................
{
hanldeClick（）；
}}>
克罗斯
..........................
))}
);
}

来自React官方：-

密钥应该是稳定的、可预测的和唯一的。不稳定键（如 由Math.random（）生成的组件将导致许多组件实例 不必要地重新创建DOM节点，这可能导致 子组件中的性能降级和状态丢失

---

您使用了

Math.random（）

作为键，我认为这就是您可能会出现奇怪行为的原因。移除该组件，并使用一个更可靠的组件，如唯一id

您正在传递

hanldeClick

到

SecondComponent

，但从道具访问

handleClick

。这是个打字错误，对不起！我无法理解你的解决方案。如果可能，请解释。拼写不匹配

hanldeClick不等于handleClick

对不起，兄弟，你说得对。这就是问题所在。但是我的代码在两个组件上是正确的（相同的名称没有拼写错误）。删除

Math.random（）

以生成密钥。删除

键一次，然后再试一次。太棒了！你帮我节省了很多时间