reactjs - React, TypeScript, Hooks - 属性 'state' 在类型上不存在

我正在尝试使用 React、TypeScript 以及 hooks 的 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>
  );
}

这里我在 state 上得到同样的错误

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 接口中添加了 state 来看看是否有帮助，但没有用。

我如何向类型添加状态

答案＃1

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

const { state } = useContext(TodosContext);

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

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

你正在 ITodosContextData 上使用展开运算符 { key1, key2, key3 }。ITodosContextData 没有成员 state。你实际上想要的是这个:

const state = useContext(TodosContext);

第二个问题类似，TodosContext.Provider.value 的类型是 ITodosContextData。而你提供的某个临时数据对象类型不同。

使用：

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

解决你的问题。