React Typescript - ошибка типа между передачей реквизита хукам - PullRequest
Новая
       104

React Typescript - ошибка типа между передачей реквизита хукам

0 голосов
/ 09 мая 2020

Я создал этот кодовый ящик, реплицирующий мою проблему

  • 1) Сначала я создал компонент <Input> (для стилизации и отслеживания, имеет ли вход содержимое или нет.
  • 2) Все работает, но, поскольку нужно добавить больше форм в проект, я подумал, черт возьми, может, я мог бы также создать ловушку useInput, чтобы просто управлять обновлением значения вместо того, чтобы добавлять onChange: {e => {setSomething(e.target.value)}} все time.

Итак, я создал эти useInput, но получил эти раздражающие ошибки красного линтера. Вероятно, это какая-то основная проблема типа c, но я могу понять , как избавиться от этой проблемы. без решений типа any? Заранее спасибо

Снимок экрана с ошибкой и фрагмент кода ниже, но лучший тест в песочнице

enter image description here

# useInput.tsx 

import { useState, ChangeEvent } from "react";

export type onChangeType = (event: ChangeEvent<HTMLInputElement>) => void;
const useInput = (initialValue = "") => {
  const [value, setValue] = useState(initialValue);

  const reset = () => setValue("");

  const onChange: onChangeType = e => {
    setValue(e.target.value);
  };

  return [value, onChange, reset];
};

export default useInput;

# Input.tsx 

import React, { useState, ChangeEvent } from "react";
import styled, { css } from "styled-components";

import onChangeType from "./hooks/useInput";

interface iLabelProps {
  hasContent: boolean;
}

const hasContentCSS = () => css`
  border: 5px solid royalblue;
`;

const Label = styled.label<iLabelProps>```

interface iInput {
  readonly type?: string;
  readonly name: string;
  readonly label: string;
  value?: string | number | string[] | null;
  defaultValue?: string | number | string[] | null;
  readonly onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
}

export const Input = ({
  name = "email",
  label,
  value = null,
  defaultValue = null,
  onChange = null
}: iInput) => {
  const [hasContent, setHasContent] = useState(!!defaultValue);

  const onBlur = value => {
    setHasContent(value.length > 0);
  };

  return (
    <Label hasContent={hasContent}>
      <input
        type="text"
        name={name}
        {...defaultValue && { defaultValue: defaultValue }}
        {...!defaultValue && { value: value ? value : "" }}
        {...onChange && { onChange: onChange }}
        onBlur={e => onBlur(e.target.value)}
      />
      <span>{label}</span>
    </Label>
  );
};

1 Ответ

1 голос
/ 09 мая 2020

Проблема возникла из-за неправильного вывода типа возвращаемого значения из ловушки useInput. ТС думаю, что это тип (string | onChangeType)[]. Это означает, что string или onChangeType могут быть в любой позиции в массиве, в то время как у вас очень фиксированный порядок.

Чтобы решить эту проблему, вам нужно немного помочь ей и либо преобразовать массив, который вы вернуть как это 

return [value, onChange, reset] as [string, onChangeType, () => void];

или явно указать тип возврата функции useInput 

const useInput = (initialValue = ""): [string, onChangeType, () => void] => {...}
...