Redux-React：调度函数时控制流出错答案

【问题标题】：Redux-React: error in control flow while dispatchcing a functionRedux-React：调度函数时控制流出错
【发布时间】：2017-07-05 20:44:39
【问题描述】：

在我解释当前正在发生的流程时，请在下面找到我的代码：

First SampleParent 调用 fetchNames 并在调用时填充报告数组并返回一个包含 6 个对象的 json 数组。接下来，当我遍历报告数组中的对象时，每次都会调用“fetchDownloadLink”函数。函数一直执行到

fetch(uri, obj)
    .then(response => {
        if (response.status !== 200) {
            throw Error(response.status);
        }
        return response ;
    })

而不是执行进一步的返回返回到 SampleParent，从那里为报告数组中的所有 6 个对象调用它。然后它进入 SampleChild 并将 onClick 值呈现为“未定义”
然后最后控制突然似乎回到'fetchDownloadLink'函数并执行函数的其余部分以返回report_uri的值最后执行结束！

我不明白为什么会这样，我希望整个函数在一个流程中执行，以便它将“report_uri”值返回给 SampleChild 的“onClick”属性

store/index.js

import C from '../constants'
import appReducer from '../reducers/reducers.js'
import thunkMiddleware  from 'redux-thunk'
import { createStore, applyMiddleware } from 'redux'
export default function configureStore() {
return createStore(
    appReducer,           
    applyMiddleware(
        thunkMiddleware))}

Main_Root.js

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from '../store/index.js'
import SampleParent from './containers/SampleParent'
const store = configureStore()
export default class Root extends Component {
render() {return (<div><Provider store={store}><SampleParent /></Provider></div>)}}

SampleParent.js

import React, {Component} from 'react'
import { connect } from 'react-redux'
import { fetchReport, fetchDownloadable } from '../../actions/actions'
import SampleChild from '../ui/SampleChild'
class SampleParent extends Component {
constructor(props) {super(props)}
componentDidMount() {this.props.fetchNames();}
render() {return (<div>
            <ul id="myUL">
                {this.props.reports.map((report) => (
                    <li><SampleChild
                            key={report.id}
                            label={report.label}
                            onClick={this.props.fetchDownloadLink("http://sample"+report.uri+".pdf")}
                        /></li>))}</ul></div>)}}
function mapStateToProps(state) {
const { reports } = state
return {reports}}
const mapDispatchToProps = dispatch => {
return {fetchDownloadLink: url => dispatch(fetchDownloadable(url)),
    fetchNames: () => dispatch(fetchReport())}}
export default connect(mapStateToProps , mapDispatchToProps)(SampleParent)

SampleChild.js

import React, { Component } from 'react'
export default class SampleChild extends Component {
render() {const { key, label, onClick } = this.props
    return (<span className="inside_SampleChild" id={label}>
        {label}
        <a onClick={onClick}>Click me for pdf download!</img></a>
        </span>)}}

action.js 中的 fetchDownlodable 函数

export const fetchDownloadable = (uri) => dispatch => {
var obj = {method: 'GET',
    headers: {'Authorization': 'Basic ***=','Accept': 'application/json'},
    'credentials': 'include'};
fetch(uri, obj)
    .then(response => {
        if (response.status !== 200) {
            throw Error(response.status);}
        return response ;})
    .then((response) => response)
    .then(resourceLookup => {
        dispatch({
            type: C.FETCH_DOWNLOADABLE,
            report_uri: resourceLookup.url})
    }).
catch(error => {
    console.log("There was this  error" + error);});}

reducer.js

import C from '../constants'
import { combineReducers } from 'redux'
export const links = (state=null, action) => (action.type === C.FETCH_DOWNLOADABLE) ? action.report_uri : state
export const reports = (state=[], action) => {
switch(action.type) {
    case C.FETCH_REPORTS : return action.reports
    default : return state}}
const rootReducer = combineReducers({ reports, links})
export default rootReducer

提前致谢！

【问题讨论】：

我可以看到您正在调用要传递给子组件的函数。这是故意的吗？例如：{this.props.fetchDownloadLink("sample"+report.uri+".pdf")}
基本上我只想将一个url传递给子组件'SampleChild'，所以我想调用一个函数，它将一个url字符串返回给参数'onClick'并且只有字符串是传给孩子...

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

当将函数传递给子级以在 onClick 上使用时，调用它实际上会立即触发它，而不是将其作为 onclick 函数提供给子级。

例如：

<ChildComponent onClick={somefunc} />

没问题

<ChildComponent onClick={somefunc("foo")} />

将触发 somefunc 函数并将其结果返回给子进程

如果你打算在 onClick 上调用这个函数，并将它绑定到某个东西，你可以这样做：

<ChildComponent onClick={() => somefunc("foo")} />

这会将它作为无参数函数传递给子级，可以从子级作为 this.props.onClick 触发

在您的情况下，根据您的评论，您正在尝试将字符串发送到子组件。字符串不能用作 onClick 值，它必须是一个函数。如果你使用我上面的最后一个例子，那将发送一个再次触发 somefunc 的函数，或者在你的例子中，下载。

【讨论】：