javascript - 我无法使用挂钩更新状态

嗨，我正在尝试使用onClick事件更新我的状态。 onClick执行但无法更新状态。

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [sixBreaks, setSixTotal] = useState({
    breaks: 11,
    screen: 15,
    hindge: 5
  });
  const update = () => {
    return setSixTotal(sixBreaks.breaks + 1)
  }
  return (
    <div className="App">
      <h1>Total Broken: {sixBreaks.breaks}</h1>
      <button onClick={() => update()}>
        CLICK ME TO INCREMENT
      </button>
    </div>
  );
}

export default App;

最佳答案

sixBreaks是一个对象，您必须更新整个对象才能更新breaks状态。

const update = () => {
  setSixTotal({
    ...sixBreaks,
    breaks: sixBreaks.breaks + 1
  });
};

进行setSixTotal(sixBreaks.breaks + 1)不会适当地更新您的breaks状态，因为这意味着您正在使用state键的值覆盖您的breaks。