必须单击两次才能使用 onClick 事件更新状态(使用状态挂钩)

Question

我在这里看到更多关于这个问题的问题，但解决方案对我不起作用。

问题是 I：必须单击两次才能更新使用 useState 钩子定义的常量的状态我怎样才能使这项工作只需要单击一次？

请参阅CodeSandbox上的代码，或下面的代码：

应用.js

import React, { useState } from "react";
import "./styles.css";
import Row from "./Row";
export default function App() {
const [adults, setAdults] = useState(1);
return <Row adults={adults} setAdults={setAdults} />;
}

行.jsx

import React, { useEffect } from "react";
export default function({ adults, setAdults }) {
useEffect(() => {
console.log(adults);
}, [adults]);
return (
<>
<button onClick={() => setAdults(adults++)}>{adults}</button>
</>
);
}

Answer 1

要么做：

setAdults(adults+1)

或：

setAdults(++adults)

小心使用++因为someObject.counter++会变异someObject。