Question

我有一个连接到商店的组件，并显示如下所示的子组件：

 render() {
        return <div>
            <div className="userBox">
               <ProfilePhoto userid={this.props.id} />
            </div>
             <div className="nameTitleBox">
                <div className="firstLastTitle">
                    <h1>{this.props.firstName} {this.props.lastName}</h1>
                </div>
                <IDBox userid={this.props.id} />
            </div>
            <div className="childcomponent">
                <childComponent />
            </div>
             <div className="profileBox">
                <EditInterests interestsList={this.props.interest} />
            </div>
        </div>
    }
}

export default connect(
	(state) => state.user,
	UserState.actionCreators
)(User);

我希望子组件是一个智能组件，它可以加载自己的数据并控制一切。它的代码非常简单。

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { ApplicationState } from '../../store';
import { connect } from 'react-redux';
import * as ChildState from '../../store/childStore';

export class ChildComponent extends React.Component {

    componentWillMount() {
        this.props;
    }

    render() {
        return (<div>
                        <div className="textCenter"><h2 id="sss">{this.props.text}</h2></div>
                        <div className="textRight">
                                <input type="button" className="button" value="Yes" /> <b className="textColor">No</b>
                            </div>
                        </div>
                    </div>
                </div>)
    }
}

const mapDispatchToProps = (dispatch) => {
    return { 
        action: dispatch(ChildState.actionCreators.requestChildren())
    }
}

export default connect(
    mapDispatchToProps,
    ChildState.actionCreators
)(ChildComponent);

子组件中的this.props始终是一个空对象。儿童状态中没有任何东西存在，初始状态，行动，发送......任何事情。我尝试了一些不同的东西。如果我实际将它加载到父级中，则ChildState加载正常。不知道为什么它没有装入孩子并连接道具。

添加以下商店：

import { Action, Reducer } from 'redux';
import { fetch, addTask } from 'domain-task';
import { AppThunkAction } from './';

export const actionCreators = {
    requestChildren: () => (dispatch, getState) => {
        let url = 'random';
        var myheaders = new Headers();
        myheaders.append("X-Requested-With", "XMLHttpRequest");
        let fetchTask = fetch(url, {
                headers: myheaders,
                credentials: "same-origin"
            })
            .then(response => response.json())
            .then(data => {
                dispatch({ type: 'POST_ACTION', children: data });
            });
        addTask(fetchTask);
    }
}

export const initialState = { ... };

export const reducer = (state = initialState, incomingAction) => {
    const action = incomingAction;
    switch (action.type) {
    case 'REQUEST_ACTION':
        return {
          ...
        };
    case 'POST_ACTION':
        return {
        ...
        };
    default:
    }

    return state || initialState;
};

Answer 1

我相信问题出现在mapDispatchtoProps中你尝试过使用bindActionCreators

bindActionCreators确保操作（ChildState.actionCreators.requestChildren）流经中间件（如果有）然后再到reducers

import { bindActionCreators} from 'redux';

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        ChildState.actionCreators.requestChildren}, dispatch); }

export default connect(
    ChildState.actionCreators,
    mapDispatchToProps
)(ChildComponent);

Answer 2

这种情况正在发生，因为我正在导出子组件和连接函数。我删除了子组件上的导出，并按预期正常工作。

子组件未连接到商店

2 个答案: