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);

您在ITodosContextData上使用擴展運算符{ key1, key2, key3 } 。 ITodosContextData沒有成員state 。 你真正想要的是這樣的：

const state = useContext(TodosContext);

---

第二個問題類似於TodosContext.Provider.value是ITodosContextData類型。 並且您正在提供一些不同類型的臨時數據對象。

用：

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

解決您的問題。