Question

我是react-redux的新手，我在理解语法方面遇到了一些困难。我正在粘贴下面的示例代码...请帮助我理解是否存在任何语法错误。

SampleParent.js：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchNames, fetchDownloadLink } from '../../actions/actions'
import SampleChild from '../ui/SampleChild'

class SampleParent extends Component {
constructor(props) {
    super(props) ;
}

componentDidMount() {
    const { dispatch } = this.props
    dispatch(fetchNames());
}

render() {
    return(<div><ul id="myUL">{this.props.reports.map((report) => (
                    <li>
                        <SampleChild
                            key={report.id}
                            label={report.label}
                            uri={() => fetchDownloadLink("http://localhost:8080/sample"+this.props.uri+".pdf")}
                        />
                    </li>))}</ul></div>)}
}

function mapStateToProps(state) {
const { reports } = state
return {
    reports
}
}

const mapDispatchToProps = dispatch => {
return {
    fetchDownloadLink(url) {
        dispatch(
            fetchDownloadLink(url)
        )
    }
}
}

export default connect(mapStateToProps, mapDispatchToProps)(ReportsApp)

SampleChild.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchDownloadLink } from '../../actions/actions'
class OpenReport extends Component {

constructor(props) {
    super(props) ;
}

render(){
    return(<div className="in_sample" id={this.props.label}>
                {this.props.label}
                <a href={this.props.uri}>
                    <img src="../images/pdf-file_128.png" height="25px" width="25px"></img></a><br></br></div>
    )
}
}
module.exports = OpenReport;

目前我收到此错误：

Uncaught TypeError: dispatch is not a function
at ReportsApp.componentDidMount (bundle.js:39883)

基本上我需要做的是从'fetchDownloadLink'函数中获取一个字符串作为字符串，并将此字符串传递给我的子组件。还有其他办法吗？

请建议...... 提前谢谢！

Answer 1

根据 Documentaion ：

mapDispatchToProps返回一个以某种方式使用dispatch进行绑定的对象行动创造者以你自己的方式。

但是在您的情况下，您将返回没有键的对象。将您的功能更改为

const mapDispatchToProps = dispatch => {

    return {
        fetchDownloadLink: (url) => dispatch(fetchDownloadLink(url))
        }
    }

}

此外，使用connect功能，您需要将mapStateToProps和mapDispatchToProps功能连接到您将在其中使用动作创建者的组件SampleParent

此外，如果您将mapDispatchToProps作为第二个参数传递给connect，那么dispatch不可用作您组件的道具。

因此，请将您的代码更改为以下

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchNames, fetchDownloadLink } from '../../actions/actions'
import SampleChild from '../ui/SampleChild'

class SampleParent extends Component {

    constructor(props) {
        super(props) ;
    }

    componentDidMount() {
        const { dispatch } = this.props
        this.props.fetchNames();
    }

    render() {
        return(<div><ul id="myUL">{this.props.reports.map((report) => (
                        <li>
                            <SampleChild
                                key={report.id}
                                label={report.label}
                                uri={() => this.props.fetchDownloadLink("http://localhost:8080/sample"+this.props.uri+".pdf")}
                            />
                        </li>))}</ul></div>)}
    }
}
function mapStateToProps(state) {

    const { reports } = state
    return {
        reports
    }

}

const mapDispatchToProps = dispatch => {

    return {
        fetchDownloadLink: (url) => dispatch(fetchDownloadLink(url)),
        fetchNames: () => dispatch(fetchNames)
        }
    }

}

 export default connect(mapStateToProps, mapDispatchToProps)(SampleParent)

Answer 2

问题是您将动作创建者作为道具uri传递给您的子组件，然后将该道具用作HREF标记。

您应该将其作为onChildClick（示例名称）道具传递给您的报告项目组件，并在onClick的{{1}}道具上调用它。

<a>

关于动作创建者映射的上一个答案很好，但是你甚至不需要一个函数：如果你使用一个带有函数作为键的对象，它们将被<a onClick={ this.props.onChildClick }>xxxx</a>包裹起来。< / p>

dispatch

更新问题后编辑 我现在看到了问题。您没有const mapDispatchToProps = { fetchDownloadLink }作为道具，因为您正在使用dispatch提供一些动作创作者作为道具。将调度映射到mapDispatchToProps并且不对fetchDownloadLink执行此操作也没有意义。既可以映射也可以不映射，但不应该混合匹配。

Redux错误：mapDispatchToProps抛出错误

2 个答案: