Параметры анонимной функции в React JS

В документации React Navigation для кнопок заголовка есть код, который создает функцию, которая обновляет состояние «счетчик».

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

<Button onPress = {() => setCount((c) => c + 1)} title = "Update count" />

демонстрационная ссылка из документации

Я предполагаю, что переменная c должна быть текущим счетчиком в анонимной функции, созданной для onPress. Однако нигде в коде нет ссылки на c.

Откуда берется значение c и как оно связано с count состоянием?

c — предыдущее состояние (точнее, текущее) переменной (count). Вы можете называть это как хотите. Чтобы понять, setCount((thisCount) => thisCount + 1)

SwaD 13.11.2022 21:21

Спасибо, я также нашел это упомянутым в документации useState.

ansonl 13.11.2022 21:24

Вы передаете функцию setCount, которая является функцией, возвращаемой setState, и именно здесь вы найдете логику использования переданной функции.

JBallin 13.11.2022 21:26
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
69
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Функция установки возврата 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 просто вызывает переданную вами функцию с текущим значением состояния. Вот и все.

Другие вопросы по теме