Передача setState в качестве аргумента пользовательскому хуку в react/next.js с машинописным текстом

Вот код, который дает мне ошибку:

import { useState, useEffect } from "react";

type Props = {
  setState: (value: string) => void;
};

const useSomeCustomHook = ({ setState }: Props) => {
  useEffect(() => {
    setState("updated value");
  }, []);
};

const SomePage = () => {
  const [state, setState] = useState("initial value");

  useSomeCustomHook(setState);
};
export default SomePage;

Я пытаюсь передать функцию setState в качестве аргумента пользовательскому хуку, но получаю эту ошибку:

Argument of type 'Dispatch<SetStateAction<string>>' is not assignable to parameter of 
type 'Props'.
Property 'setState' is missing in type 'Dispatch<SetStateAction<string>>' but required 
in type 'Props'.

Я попытался переключить пользовательский хук на обычную функцию, и это сработало. Означает ли это, что есть что-то в пользовательских хуках, чего я не понимаю? По ошибке похоже проблема с типом реквизита?

Формы 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
0
19
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Вы ожидаете, что объект будет передан useCustomHook, но вы вызываете его с помощью функции. Используйте это так, если вы не хотите менять Props или ожидаете больше реквизита позже:

const SomePage = () => {
  const [state, setState] = useState("initial value");

  useSomeCustomHook({setState});
};

В React есть определение setState.

Итак, вам нужно определить тип вашей функции setState, как показано ниже.

type Props = {
  setState: Dispatch<SetStateAction<string>>;
};

const useSomeCustomHook = ({ setState }: Props) => {
  useEffect(() => {
    setState("updated value");
  }, []);
};

const SomePage = () => {
  const [state, setState] = useState("initial value");

  useSomeCustomHook({setState});
};
export default SomePage;

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