Question

我在使用ES6语法时未定义Redux。但是，使用import语句可以正常工作。我该如何解决这个错误？

我正在使用入门套件https://github.com/davezuko/react-redux-starter-kit进行反应。

以下是代码。

的index.html

<!doctype html>
<html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
        <script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>

        <title>React App</title>
      </head>
      <body>
        <div id="root"></div>

      </body>
    </html>

INDEX.JS

const todo = (state, action) => {
    switch(action.type) {
        case 'ADD_TODO':
            return {
                id: action.id,
                text: action.text,
                completed: false
            }
        case 'TOGGLE_TODO':
            if(state.id !== action.id){
                return state;
            }

            return {
                ...state,
                completed: !state.completed
            }
        default: 
            return state;
    }
};

const todos = (state = [], action) => {
    switch(action.type) {
        case 'ADD_TODO': 
            return [
                ...state,
                todo(undefined, action)
            ]
        case 'TOGGLE_TODO': 
            return state.map(t => todo(t, action));
        default: 
            return state;
    }
};

const {combineReducers} = Redux;

const todoApp = combineReducers({todos});
const { createStore } = Redux;
const store = createStore(todoApp);


const { Component } = Redux;

let nextTodoId = 0;

class TodoApp extends Component {
    render() {
        return (
            <div>
                <input type="text" ref={node => {
                    this.input = node;
                }} />
                <button onClick={() => {
                    store.dispatch({
                        type: 'ADD_TODO',
                        text: this.input.value,
                        id: nextTodoId++
                    });
                }}>
                Add Todo</button>

                <ul>
                    {this.props.todos.map(todo => 
                        <li key={todo.id}>
                            {todo.text}
                        </li>
                    )}
                </ul>
            </div>
        )
    }

}

const render = () => {
    ReactDOM.render(
        <TodoApp todos={store.getState().todos} />, 
        document.getElementById('root')
    );
}
store.subscribe(render);

render();

Answer 1

问题在于您定义Component的行。您正在尝试从Redux获取Component，而Redux没有它。

应该阅读

const {Component} = React

出于好奇，你为什么要这样做，而不是使用进口？

在ES6语法模式下未定义Redux

1 个答案: