Question

我试图学习一些redux。我正在处理的组件是一个基于<div>的基于按钮的按钮 - 单击时 - 将值作为参数传递给调度，因此可以在以后的其他地方显示。

通过网络跟踪文档和教程后，我想出了以下代码：

主应用容器

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from './../store/configureStore.js'
import Input from './input.js'

let store = configureStore()

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Input />
            </Provider>
        )
    }
}

按钮容器

import React, { Component } from 'react'
import { connect } from 'react-redux'
import printOut from './../actions/actions.js'
import InputComponent from './../components/inputComponent.js'
import PropTypes from 'prop-types'

const mapDispatchToProps = (dispatch) => {
    return {
        onClick: (input) => dispatch(printOut(input))
    }
}

const Input = connect(mapDispatchToProps)(InputComponent)

export default Input

按钮组件

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Input extends Component {
    render() { 
        return (
            <div style={style} onClick={this.props.onClick('lala')}>Button!</div>
        )
    }
}
Input.PropTypes = {
    onClick: PropTypes.func.isRequired
}
const style = {
    height: 30, 
    width: 100, 
    backgroundColor: '#ff4068'
}

export default Input

申请中断。我从控制台得到了这个：

Uncaught TypeError: (0 , _actions2.default) is not a function
    at Object.onClick (index.js:33683)
    at Input.render (index.js:33743)
    (...)
index.js:22443 The above error occurred in the <Input> component:
    in Input (created by Connect(Input))
    in Connect(Input) (created by App)
    in Provider (created by App)
    in App

从我理解的一点点来看，button component存在一些问题以及我试图将参数传递给道具的方式。所以我尝试稍微更改它并在渲染之前添加了一个处理它的函数。

...
onClick(input) {
    return this.props.onClick(input)
}
render() {
    return (
        <div style={style} onClick={onClick('lala')}>Button!</div>
    )
}
...

我这次得到的错误是onClick is not defined。哦好的。在调用此新函数之前，我忘记了this关键字。所以我将它添加到组件中，现在我已经

了

<div style={style} onClick={this.onClick('lala')}>Button!</div>

但是返回的错误并没有真正改变 - 它再次是Uncaught TypeError: (0 , _actions2.default) is not a function的原始错误

我现在开始缺乏想法。有人可以告诉我这是怎么回事？ Help me Stack Overflow, you're my only hope!引用永恒经典。

Answer 1

您确定要正确导入printOut吗？不应该是import { printOut } from './../actions/actions.js'吗？

然后，连接中的第一个参数是mapStateToProps，第二个参数是mapDispatchToProps这可能就是dispatch is not a function的原因。

Answer 2

您正在导入InputComponent：

import InputComponent from './../components/inputComponent.js'

但在按钮组件内部，您将其导出为Input：

export default Input

所以改变InputComponent：

import Input from './../components/inputComponent.js'

将此用于连接

export default connect(mapDispatchToProps)(Input)

Answer 3

你面临两个问题。

<强> 1。导入中的语法问题

以下问题datafile是由导入操作引起的。

而不是

Uncaught TypeError: (0 , _actions2.default) is not a function

应该是

import printOut from './../actions/actions.js'

<强> 2。您未正确使用import { printOut } from './../actions/actions.js'

connect按以下顺序接受这两个参数：

connect：包含您要为组件提供的道具
mapStateToProps：包含要发送的操作

即使您可以调用您的操作，也无法通过调用mapDispatchToProps而不是reducers来发送调度。

您应该做的是以下内容：

dispatch

您可以阅读此文档以获取更多详细信息：http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components

使用mapDispatchToProps时在React中初始化Redux的问题

3 个答案: