Docs regarding setState are in direct conflict with one another

In Introducting Hooks, and several other places, there is a simple counter example that illustrates how to use the useState hook.

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

However, there happens to be another counter example in the Hooks API Reference for useState.

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

In this second example, a callback is being passed into the setState function, and the code is accompanied by the following language...

The ”+” and ”-” buttons use the functional form, because the updated value is based on the previous value.

This would imply that the first example (which is in a very prominent location in the docs by the way), is actually incorrect and is encouraging an anti-pattern.

I hope you can see how these two examples are in direct conflict with one another and might be causing confusion in the community!

阅读 Introducing Hooks 和 Hooks API Reference 中的计数器示例，尤其是 functional-updates 部分，并比较其中关于 setState 的指导。解决这一不一致，使文档对每种形式适用的时机给出一个清晰的解释，然后验证链接的示例和周围文本不再相互冲突。