Question

我已经看到更多关于此的问题，但是解决方案对我不起作用。

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

请参见CodeSandbox上的代码或以下代码：

App.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} />;
}

Row.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。

必须单击两次以使用onClick事件更新状态（useState挂钩）

1 个答案: