В документации React Navigation для кнопок заголовка есть код, который создает функцию, которая обновляет состояние «счетчик».
const [count, setCount] = React.useState(0);
<Button onPress = {() => setCount((c) => c + 1)} title = "Update count" />
демонстрационная ссылка из документации
Я предполагаю, что переменная c
должна быть текущим счетчиком в анонимной функции, созданной для onPress. Однако нигде в коде нет ссылки на c
.
Откуда берется значение c
и как оно связано с count
состоянием?
Спасибо, я также нашел это упомянутым в документации useState.
Вы передаете функцию setCount, которая является функцией, возвращаемой setState, и именно здесь вы найдете логику использования переданной функции.
Функция установки возврата setState из useState автоматически передает предыдущее значение состояния в функцию, переданную в setState.
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>
</>
);
}
Когда вы передаете функцию средству обновления состояния, как здесь, React вызывает эту функцию с текущим значением.
c
передается React. (Это обычный параметр функции, так что вы можете называть его как хотите.)
Я думаю, что самым простым и понятным объяснением было бы сравнение с функцией Array#map
. Arrat#map
— это функция высшего порядка — это означает, что она принимает другую функцию в качестве аргумента/параметра.
[1, 2].map((item) => item + 1); // [2, 3]
// ^^^^^^^^^^^^^^^^^^^ this is the callback function
Та же ситуация с функцией setState (в вашем примере — setCount
) — она принимает функцию в качестве аргумента. Функция, которая работает так же, как функция, переданная выше в Array#map
, с той разницей, что в Arrat#map
параметр item
является текущим итерируемым элементом массива, но в функции установки состояния item
(или c
в вашем случае) будет стоять как текущее значение состояния (в вашем случае count
).
setCount((c) => c + 1);
// ^^^ current value of `count`
Затем React
просто вызывает переданную вами функцию с текущим значением состояния. Вот и все.
c — предыдущее состояние (точнее, текущее) переменной (count). Вы можете называть это как хотите. Чтобы понять,
setCount((thisCount) => thisCount + 1)