我无法使用钩子更新我的状态

Question

嗨，我正在尝试使用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;

Answer 1

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

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

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

Answer 2

使用扩展运算符更新以更新对象属性上的值。 在此处阅读更多相关信息

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

或者像这样使用 Object.assign 函数：

const update = () => {
        const updatedValue = Object.assign({}, sixBreaks, {breaks: sixBreaks.breaks + 1})
        return setSixTotal(updatedValue)
    }

所以像这样更新你的代码：

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 = () => {
        setSixTotal({...sixBreaks, {breaks: 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;

Answer 3

你应该做

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

不要直接使用sixBreaks.breaks ，因为React 不能保证它在更新时是相同的，而是使用我上面写的回调样式来避免错误