TypeError: todos.map 不是函数

Question

我正在使用带有钩子的 React、Redux 和 TypeScript 构建一个待办事项应用程序。

我不知道为什么它可以成功编译但无法在浏览器中运行。

错误：

TypeError: todos.map is not a function.

我检查了todo 的类型，它是Todo[] 类型（即一个数组），相应地，它可以使用map 进行迭代。

我不知道如何解决这个问题。

此处代码：https://codesandbox.io/s/agitated-meadow-53w0u?file=/src/App.tsx

App.tsx

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { useTypedSelector } from "./index";


function AddToDo() {
  const [input, setInput] = useState("");
  const dispatch = useDispatch();

  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
    setInput(e.target.value);
  }

  //dispatch to store
  function handleAddTodo() {
    dispatch({ text: input })
    setInput("");
  }

  return (
    <div>
      <input type="text" onChange={e => handleInput(e)} value={input} />
      <button type="button" onClick={handleAddTodo}>
        Add todo
      </button>
    </div>
  );
}

//TodoList
export interface Todo {
  text: string;
}

function TodoList() {
  const todos = useTypedSelector((state) => state)

  return (
    <ul className="todo-list">
      {todos.map((todo: Todo) => {
        return <Todo todo={todo} />;
      })}
    </ul>
  );
}

//Todo
function Todo({ todo }: { todo: Todo }) {
  return <li>{todo.text}</li>;
}

function App() {
  return (
    <div className="App">
      <AddToDo />
      <TodoList />
    </div>
  );
}

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, TypedUseSelectorHook, useSelector } from 'react-redux'
import { createStore, combineReducers } from 'redux'
import App, { Todo } from './App';

//actions
const ADD_TODO = 'ADD_TODO'

type Action = AddTodo

export function addTodo(text: string) {
    return {
        type: ADD_TODO,
        text
    }
}
type AddTodo = ReturnType<typeof addTodo>

const INITIAL_STATE = [] as Todo[]
//reducer
function todoReducer(state = INITIAL_STATE, action: Action): Todo[] {
    switch (action.type) {
        case ADD_TODO:
            const todos: Todo[] = [
                ...state,
                {
                    text: action.text,
                }
            ]
            return todos
        default:

            return state
    }
}

const todoApp = combineReducers({
    todos: todoReducer
}
)

type RootState = ReturnType<typeof todoReducer>

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector

//store
const store = createStore(todoApp)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,

    document.getElementById('root')
);

Answer 1

根据@JohnHass

因为 RootState 不是根状态的实际类型，所以您已经创建了 它是 Todo[] 当状态实际上是 { todos: Todo[] }

---

那么你需要改变的是从这个

const todos = useTypedSelector(state => state);

收件人：

const todos = useTypedSelector(state => state.todos);

状态不是返回数组而是带有 todos 键的对象，

---

另一个问题：

未传递事件类型：

function handleAddTodo() {
    dispatch({ text: input }); // <--- Not even passing action type
    setInput("");
}

改成：

function handleAddTodo() {
    dispatch({ type: "ADD_TODO", text: input });
    setInput("");
}

//-------------- OR ---------------

import { useTypedSelector , addTodo } from "./index";

//dispatch to store
function handleAddTodo() {
    dispatch(addTodo(input));
    setInput("");
}

Answer 2

问题

您的state.todos 是一个数组，但您将const todos 分配给整个state，即对象{ todos: Todo[], ... }。

可能的解决方案

1。获取todos，仅在回调中请求该属性：

const todos = useTypedSelector((state) => state.todos)

2。解构赋值：

const { todos } = useTypedSelector((state) => state)