Почему появляется ошибка что отсутствует тип?

Question

[takoyklasnii]

Есть 3 компонента: App.tsx, HOC (Crud.tsx), TodoForm.tsx

App.tsx

import * as React from "react";
import Navbar from "./components/Navbar";
import TodoForm from "./components/TodoForm";
import TodoList from "./components/TodoList";
import { ITodo } from "./interfaces";
import Crud from "./components/hoc/Crud";

interface IProps {
  todos: ITodo[];
  add: (title: string) => void;
}

const App: React.FC<IProps> = ({ todos, add }) => {
  return (
    <>
      <Navbar />
      <div className="container">
        <TodoForm add={add} />
        <TodoList todos={todos} />
      </div>
    </>
  );
};

const MemorizedApp = React.memo(Crud(App));

export default MemorizedApp;

TodoForm.tsx

import React from "react";

interface IProps {
  add: (title: string) => void;
}

const TodoForm: React.FC<IProps> = ({ add }) => {
  let text: HTMLInputElement | null;

  function __handlePress(e: React.KeyboardEvent<HTMLInputElement | null>) {
    if (e.key === "Enter") {
      add(text!.value);
      text!.value = "";
    }
  }

  return (
    <div className="input-field" style={{ marginTop: "2rem" }}>
      <input
        ref={node => (text = node)}
        type="text"
        id="title"
        placeholder="пишем тут"
        onKeyPress={__handlePress}
      />
      <label htmlFor="title" className="active">
        Что делаем ?
      </label>
    </div>
  );
};

export default TodoForm;

HOC Crud.tsx

import React from "react";
import axios from "axios";
import { ITodo } from "../../interfaces";

interface IState {
  apiUrl: string;
  todos: ITodo[];
}

const Crud = <T extends object>(Component: React.ComponentType<T>) => {
  class WithCrud extends React.Component<T> {
    state: IState = {
      todos: [],
      apiUrl: "http://localhost:5000/api/todo"
    };

    componentDidMount() {
      this.get();
    }

    get = async () => {
      try {
        const { data } = await axios.get(`${this.state.apiUrl}/get`);

        if (data) {
          this.setState((state: IState) => {
            return (state.todos = data.message);
          });
        }
      } catch (error) {}
    };

    add = async (title: string) => {
      if (title !== "") {
        try {
          const { data } = await axios.post(`${this.state.apiUrl}/create`);
          console.log(data);
        } catch (error) {}
      }
    };

    render() {
      const { ...props } = this.props;

      return (
        <Component add={this.add} todos={this.state.todos} {...(props as T)} />
      );
    }
  }
  return WithCrud;
};

export default Crud;

Вылетает ошибка при компиляции:

Type '{}' is missing the following properties from type 'IProps': todos, add

В чем может быть проблема ? Если убираю add, то ошибка пропадает, с бека приходит ответ с тудухами и все отрабатывает. Где я ошибся ?

Answer 1

[Robur]

Потому что вы типа пропсов для WithCrud ставите такой же как у App.
Сделайте новый интерфейс пропсов для WithCrud класса

или можете просто написать class WithCrud extends React.Component<{}> {

И почитайте про дженерики - они тут вам или не нужны или надо использовать не так

Comments

[takoyklasnii]

Спасибо, но все равно такая же ошибка(

Answer 2

[Дмитрий Беляев]

Очевидно, что компонент App ожидает 2 обязательных пропса согласно этому интерфейсу:

interface IProps {
  todos: ITodo[];
  add: (title: string) => void;
}

Нужно или сделать их необязательными:

interface IProps {
  todos?: ITodo[];
  add?: (title: string) => void;
}

или передать в App

ReactDOM.render(
  <App todos={[]} add={(title: string) => console.log(title)} />,
  document.getElementById('root')
);