Question

构建基本待办事项应用

我在指南的相同文件夹结构中看到了所有文件。但是我还有其他文件，从节点服务器生成其他路由以用于其他路由。

直到我引入redux，该应用程序运行正常。

每当我尝试将一个动作发送到redux商店时，我都会遇到以下两个错误：

Uncaught TypeError: (0 , _actions.addTodo) is not a function
Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.

从在线浏览看起来似乎可能是一些事情

A）我正在尝试创建一个包含多个块的应用程序:(我尝试添加crossOriginLoading attr）

entry: {
    service: APP_DIR + '/service-side/service.index.jsx',
    admin: APP_DIR + '/admin-side/Admin.jsx',
    todo: APP_DIR + '/todo.index.jsx'
},
output: {
    filename: '[name].bundle.js',
    path: BUILD_DIR,
    crossOriginLoading: "anonymous"

B）将包含的脚本设置为crossorigin设置：

<script crossorigin type="text/javascript" src="./dist/todo.bundle.js"></script>

C）使用CDN？不使用任何CDN

D）Devtool设置为

devtool: {
    devtool: 'cheap-module-source-map'
}

我使用webpack制作一个包，然后在HTML页面上提供该包。该应用程序甚至没有提出任何请求，所以我很困惑为什么会出现CORS问题......

任何人都知道我还可以尝试调试这个吗？

编辑：一堆React代码：

INDEX

import React from 'react'
import {render} from 'react-dom'
import {Provider} from 'react-redux'
import {createStore} from 'redux'

import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

APP

import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
    <div>
        <AddTodo />
        <VisibleTodoList />
        <Footer />
    </div>
)

export default App

ADDTODO

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

动作/ index.js

let nextTodoId = 0
export const addTodo = text => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}

export const setVisibilityFilter = filter => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  }
}

export const toggleTodo = id => {
  return {
    type: 'TOGGLE_TODO',
    id
  }
}

Answer 1

尝试在导入时提供完整路径。

 import { addTodo } from '../actions/index'

帮助：）

React redux cross origin error / typerror不是函数

1 个答案: