Ошибка Redux: mapDispatchToProps выдает ошибку

Я новичок в response-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)

В основном мне нужно получить URL-адрес в виде строки из функции fetchDownloadLink и передать эту строку моему дочернему компоненту. Есть ли другой способ сделать это?

Пожалуйста, предложите ... Заранее спасибо!


reactjs redux react-redux redux-thunk
person user3868051    schedule 29.06.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Согласно Documentaion :

mapDispatchToProps возвращает объект, который каким-то образом использует диспетчеризацию для привязки создателей действий по-вашему.

Однако в вашем случае вы возвращаете объект без ключей. Измените свою функцию на

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)
person Shubham Khatri    schedule 29.06.2017
comment
Привет, Шубхэм, Спасибо за помощь, но когда я запускаю это, 'uri = {() = ›this.props.fetchDownloadLink (localhost: 8080 / sample + this.props.uri + .pdf) ', он передает всю функцию в качестве параметра компоненту SampleChild. Нельзя ли сделать так, чтобы эта функция вместо этого возвращала строку URL-адреса и передавала только URL-адрес, сформированный заранее ...? вместо передачи самой функции ... поскольку функция недоступна в SampleChild ... или как сделать ее доступной для SampleChild? - person user3868051; 29.06.2017
comment
Да, можно, если написать uri={this.props.fetchDownloadLink("localhost:8080/…;)} - person Shubham Khatri; 29.06.2017
comment
Это как-то перестало отображать даже другие элементы внутри тегов ‹li› :( Или вместо использования диспетчеризации есть какой-либо другой способ вызвать функцию? - person user3868051; 29.06.2017
comment
Вы хотите обновить состояние редукции с помощью этой функции, если да, тогда вам нужно использовать диспетчеризацию, иначе вы можете использовать ее даже без этого. Также были ли у вас какие-либо ошибки - person Shubham Khatri; 29.06.2017

arrow_upward
1
arrow_downward

Проблема в том, что вы передаете своего создателя действий в качестве опоры uri своему дочернему компоненту, а затем используете эту опору как тег HREF.

Вместо этого вы должны передать его как onChildClick (имя примера) prop в компонент элемента отчета и вызвать его в опоре onClick <a>.

<a onClick={ this.props.onChildClick }>xxxx</a>

Предыдущий ответ о сопоставлении создателя действий хорош, но вам даже не нужна функция: если вы используете объект с функциями в качестве ключей, они будут заключены в dispatch для вас.

const mapDispatchToProps = {
  fetchDownloadLink
}

ИЗМЕНИТЬ после вашего обновленного вопроса. Теперь я вижу проблему. У вас нет dispatch в качестве реквизита, потому что вы используете mapDispatchToProps для предоставления некоторых создателей действий в качестве реквизита. Нет смысла отображать отправку в fetchDownloadLink и не делать этого также для fetchNames. Сопоставьте оба или ни один, но вы не должны смешивать и сочетать.

person CharlieBrown    schedule 29.06.2017
comment
Прошу прощения, я не совсем понимаю, что вы имеете в виду, передавая его как опору 'onChildClick (имя примера)' ... как именно вы относитесь к вызову функции 'fetchDownloadLink'? - person user3868051; 29.06.2017
comment
просто уточняю ... 'fetchDownloadLink (url)' возвращает сформированный URL-адрес в виде строки, этот URL-адрес необходимо указать в дочернем компоненте - person user3868051; 29.06.2017