Как ввести начальное состояние для контекста реакции при использовании useState в качестве значения

Недавно я видел на YouTube видео Джека Херрингтона «Освоение контекста React», где он использовал useState в качестве значения для своего поставщика контекста. Это показалось мне интересным, но когда я попытался сделать то же самое с машинописным текстом, я был совершенно озадачен тем, как набирать начальное состояние.

Пример JS-кода:

const CounterContext = createContext(null);

const CounterContextProvider = ({children}) => {
  return (
    <CounterContext.Provider value={useState(0)}>
      {children}
    </CounterContext.Provider>
}  

Использование null в качестве значения по умолчанию не может быть и речи. Я мог бы определить правильные типы для useState, но как бы выглядели значения начального состояния?

А как насчет const [someValue, setValue] = useState<number>(0);?

guimauve 22.04.2022 22:15

@guimauve, проверьте ответ ниже.

Frederick M. Rogers 22.04.2022 23:05
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
2
26
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Значение, возвращаемое useState(0), представляет собой кортеж типа [number, Dispatch<SetStateAction<number>>], где Dispatch и SetStateAction импортируются из реакции. Итак, с фиктивным значением по умолчанию это будет выглядеть так:

import { createContext, Dispatch, SetStateAction } from "react";

const CounterContext = createContext<
  [number, Dispatch<SetStateAction<number>>]
>([0, () => {}]);

Это сработало отлично. Мне никогда не приходило в голову, что () => {} может быть значением по умолчанию. Спасибо.

Frederick M. Rogers 22.04.2022 23:07

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

Передача vscode во внешние функции
Firebase: Почему мой код использует только первый документ в моей коллекции?
Реагировать на ошибку машинописного текста - элемент неявно имеет любой тип, потому что выражение строки типа не может использоваться для индексирования типа {}
Как получить доступ к вложенным необязательным индексам из интерфейса
Почему машинописный текст не может контекстуально вывести эти типы промежуточного программного обеспечения
Передать конструктор класса как функцию в другом классе
React & clsx: добавьте имя класса, если текущий элемент в сопоставленном массиве является первым из нескольких элементов
Свойство «MathFun» отсутствует в типе «(x?: число, y?: число) => число», но требуется в типе «Func».
Получение строки типа не может быть назначено строке типа для компонента TS в сборнике рассказов
Как ввести useState для файлов?