Question

我已经实现了redux以完成TODO应用程序。

我的待办事项代码

 import { connect } from "react-redux";

import TodoList from "../components/TodoList.js";

// Here we will connect 

const mapStateToProps = state => {
    todos: state.todos
}

const mapDispatchToProps = dispatch => {
    toggleTodo: id => dispatch({ type: 'TOGGLE_TODOS', id })


}


export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

//减速器

 const todos = (state = [], action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return [
                ...state, {
                    id: action.id,
                    text: action.text,
                    visibility: false
                }
            ]
        case 'TOGGLE-TODO':
            return state.map(todo => (todo.id === action.id)
                ?
                { ...todo, completed: !todo.completed }
                : todo)
        default:
            return state;
    }

}

export default todos;

最后我得到一个错误 “ mapStateToProps必须接收一个普通对象，而不是接收到未定义对象。”

请让我知道如何解决此问题。

Answer 1

您需要返回对象，您可以这样做，请参见对象周围的括号。

const mapStateToProps = state => ({
    todos: state.todos
})

您也可以这样做

const mapStateToProps = state => { 
    return { todos: state.todos }; 
};

两者都返回一个对象。

Answer 2

您遇到语法错误。您应该将代码括在括号中。

const mapStateToProps = state => ({
    todos: state.todos
})

简而言之：

const mapStateToProps = state => ( { } ) // This returns an empty object

Answer 3

对我来说，问题是不正确的import声明。

在我的代码中是

...
import { parseStore } from "../../parseStore"; // cause of ERROR
import reducer from "../../reducer";

const mapStateToProps = () => {
  return parseStore;
};

...

导入失败，并导致undefined。通过将导入语句从命名导入更正为默认导入来解决此问题。

connect（）中的mapStateToProps（）必须返回一个普通对象，而不是收到未定义的对象

3 个答案: