它们是使用useState钩子更新状态的函数形式吗？useState钩子包含更新的道具和以前的状态？

Question

在基于类的React组件中，我们可以使用setState的函数形式定义处理函数，例如：

const handleClick =()=> {this.setState((prevState,updatedProps)=>({// return some object }))}

其中，两个参数表示传递给此组件的先前状态和更新的道具。

类似地，我们有一个函数形式，使用useState钩子在函数组件中设置状态，如下所示：

const [count, setCount] = useState(0);

const handleClick =()=> {setCount(c=>c+1)}

但正如我们所看到的，useState钩子中的函数形式缺少表示更新的道具的第二个参数

这是React开发团队故意留下的吗？在useState钩子中设置状态时，我们如何访问更新的道具以及以前的状态？描述问题的实际代码：代码沙盒链接

只需通过在应用程序组件中一次导入一个计数器组件，在两个计数器组件（一个是功能组件，另一个是基于类的）之间进行切换。

Answer 1

为什么不像这样触发useEffect中的计数（我这样修改了你的FunctionalCounter），阅读代码中的注释。

（相当hacky的方式，所以它只会改变，如果道具值是由点击触发）

import React, { useState, useEffect } from "react";

export default function FunctionalCounter(props) {
  const [count, setCount] = useState(100);
  const [shouldTrigger, setShouldTrigger] = useState(false);

useEffect(() => {
  if (shouldTrigger) {
    setCount((c) => c + props.fromParent);
    setShouldTrigger(false);
  }
}, [props.fromParent,shouldTrigger]);

  return (
    <div>
      <h3> The counter value is {count}</h3>
      <button
        onClick={() => {
          props.handleUpdate();
          setShouldTrigger(true);
        }}
      >
        Click me
      </button>
    </div>
  );
}

我能想到的另一种方法是返回道具上的值。handleUpdate（）这样您就可以使用它而不必依赖于父级，就像这样：

App.js

  const handleUpdate = () => {
    const newVal = appVar + 1
    setAppVar(newVal);
    return newVal;
  }

功能计数器。js

import React, { useState } from "react";

export default function FunctionalCounter(props) {
  const [count, setCount] = useState(100);

  return (
    <div>
      <h3> The counter value is {count}</h3>
      <button
        onClick={() => {
          const newCount = props.handleUpdate();
          setCount(newCount);
        }}
      >
        Click me
      </button>
    </div>
  );
}