Question

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

第一个SampleParent调用fetchNames，当调用时，这将填充报告数组并返回一个包含6个对象的json数组。接下来，当我遍历reports数组中的对象时，每次调用'fetchDownloadLink'函数。该函数执行到

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

而不是执行进一步返回到SampleParent，从它为报表数组中的所有6个对象调用它。然后它进入SampleChild并将onClick值渲染为'undefined' 然后最后控制suddendly似乎回到'fetchDownloadLink'函数并执行函数的其余部分以返回report_uri的值最后执行结束了！

我不明白为什么这个hapenning，我希望整个函数在一个流程中执行，以便它将'report_uri'值返回给SampleChild的'onClick'道具

商品/ 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

提前致谢！

Answer 1

将函数传递给要在onClick上使用的子函数时，调用它实际上会立即激活它，而不是将它作为onclick函数传递给子函数。

前：

#single-pg p + img{margin-top:30px;}

很好

<ChildComponent onClick={somefunc} />

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

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

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

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

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

Redux-React：调度函数时控制流中的错误

1 个答案: