React、Typescript、Hooks - 类型上不存在属性“状态”

Question

我正在尝试使用 React、Typescript 和钩子 useContext 和 useReducer 创建一个简单的待办事项应用程序。

索引.tsx

import React, { useContext, useReducer } from "react";
import ReactDOM from "react-dom";
import "./index.css";

import TodosContext from "./context";
import todosReducer from "./reducer";
import TodoList from "./components/TodoList";
import { ITodo } from "./context";

const App = () => {
  const initialState = useContext(TodosContext);
  const [state, dispatch] = useReducer(todosReducer, initialState);

  return (
    <TodosContext.Provider value={{ state, dispatch }}> <!-- error here --->
      <TodoList />
    </TodosContext.Provider>
  );
};

ReactDOM.render(
  <App />,

  document.getElementById("root")
);

这里我得到状态错误

Type '{ state: any; dispatch: Dispatch<any>; }' is not assignable to type '{ todos: { id: number; text: string; complete: boolean; }[]; }'.
  Object literal may only specify known properties, and 'state' does not exist in type '{ todos: { id: number; text: string; complete: boolean; }[]; }'.ts(2322)

待办事项列表.tsx

import React, { useContext } from "react";
import TodosContext from "../context";
import { ITodo } from "../context";
import { initialState } from "../context";

export default function TodoList() {
  const { state } = useContext(TodosContext); <!-- error here --->

  return (
    <div>
      <ul>
        {state.todos.map(todo => (
          <li key={todo.id}>
            <span>{todo.text}</span>
            <button>edit</button>
            <button>delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

这里我得到了同样的状态错误

Property 'state' does not exist on type '{ todos: { id: number; text: string; complete: boolean; }[]; }'.ts(2339)

上下文.tsx

import React from "react";

export interface ITodo {
  id: number;
  text: string;
  complete: boolean;
  state?: any; <!-- state is included in the interface --->
}

export const initialState = [
  { id: 1, text: "todo 1", complete: false },
  { id: 2, text: "todo 2", complete: false },
  { id: 3, text: "todo 3", complete: true }
];

const TodosContext = React.createContext({
  todos: [
    { id: 1, text: "todo 1", complete: false },
    { id: 2, text: "todo 2", complete: false },
    { id: 3, text: "todo 3", complete: true }
  ]
});

export default TodosContext;

减速器.tsx

export default function reducer(state: any, action: any) {
  switch (action.type) {
    default:
      return state;
  }
}

我已向 ITodo 界面添加了状态以查看是否有帮助，但事实并非如此。

如何向类型添加状态

Answer 1

有两个错误。它们是不同类型的错误。首要问题：

const { state } = useContext(TodosContext);

TodosContext已使用某种类型创建，并且在调用后返回该类型的对象useContext。使用显式类型来更好地理解它是如何工作的：

interface ITodosContextData {
  todos: ITodo[];
}
const TodosContext = React.createContext<ITodosContextData>(initialState);
const state: ITodosContextData = useContext(TodosContext);

您正在使用展开运算{ key1, key2, key3 }符ITodosContextData。ITodosContextData没有会员state。你真正想要的是这样的：

const state = useContext(TodosContext);

第二期是类似的TodosContext.Provider.value类型ITodosContextData。并且您正在提供一些不同类型的临时数据对象。

使用：

const [state, dispatch] = useReducer(todosReducer, initialState);
<TodosContext.Provider value={state}>

解决你的问题。