写了一个React代码片段来实现条件呈现，但无法更新{Left}和{Right}的状态

Question

终端/控制台未返回错误。我弄不清楚哪里出了问题。handleLeftClicks((用于渲染单击left按钮的次数和分别单击right按钮的次数。"历史记录"组件中的allClicks用于呈现总点击次数。我无法同时更新｛左｝和｛右｝。我尝试在控制台中记录这两个函数，但无法在控制台中获得输出。

如果这个新手问题浪费了你的时间，我真的很抱歉。

import React, { useState } from "react";
const History = (props) => {
  if (props.allClicks.length === 0) {
    return <div>The app is used by pressing the buttons</div>;
  }
  return <div>button press history: {props.allClicks.join(" ")}</div>;
};
const Button = ({ handleClick, text }) => (
  <button onClick={handleClick}>{text}</button>
);
const App = () => {
  const [left, setLeft] = useState(0);
  const [right, setRight] = useState(0);
  const [allClicks, setAll] = useState([]);
  const handleLeftClicks = () => {
    console.log("left click");
    setAll(allClicks.concat("L"));
    setLeft(left + 1);
  };
  const handleRightClicks = () => {
    console.log("right click");
    setAll(allClicks.concat("R"));
    setRight(right + 1);
  };
  console.log(left);
  console.log(right);
  console.log(allClicks);
  return (
    <div>
      {left}
      <Button handleClick={handleLeftClicks} text="left" />
      <Button handleClick={handleRightClicks} text="right" />
      {right}
      <History allClicks={allClicks} />
    </div>
  );
};
export default App;

Answer 1

您将错误的道具传递给Button组件。它应该是handleClick而不是onClick。

<Button handleClick={handleLeftClicks} text="left" />

代码沙盒