Question

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

index.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)

TodoList.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)

context.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;

reducer.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}>

解决您的问题。

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

1 个答案: