Question

我正在渲染 RootComponent ：

//RENDERING ROOT COMPONENT-------------------------------------------------------------------------------
ReactDOM.render(

    <Provider store={store}>
        <RootComponent />
    </Provider>, 

    document.getElementById('app'));
//RENDERING ROOT COMPONENT-------------------------------------------------------------------------------

RootComponent 只有一个容器：

//ROOT COMPONENT----------------------------------------------------------------------------------------------------
const RootComponent = () => (

    <div>
        <BookListContainer />           
    </div>

);
//ROOT COMPONENT----------------------------------------------------------------------------------------------------

BooklistContainer ：

//BOOKLIST CONTAINER-------------------------------------------------------------------------------------------------------
class BookListContainer extends Component{

    componentWillMount(){
        console.log('componentWillMount executing...');
        () => this.props.ajaxRequestTriggeredMethod();
    }

    render() {
        return (
            <div>
                <BooksList DataInputParam={this.props.books} BtnClickHandler={this.props.buttonClickedMethod} />            
            </div>
        );
    }
}


const mapStateToProps = (state) => {
    return{
        books: state.BooksReducer
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        buttonClickedMethod: () => dispatch({type: 'BUTTON_CLICKED'}),
        ajaxRequestTriggeredMethod: () => console.log('ajaxRequestTriggeredMethod is consoled...')
    };
};

connect(mapStateToProps, mapDispatchToProps)(BookListContainer);
//BOOKLIST CONTAINER-------------------------------------------------------------------------------------------------------

目前所有组件都在一个js文件中，因此除了标准库之外我不会导出/导入任何内容...

结果：我在控制台中收到 ＆＃39; componentWillMount正在执行...＆＃39; 消息，但 ＆＃39; ajaxRequestTriggeredMethod已安慰...＆＃39; 消息。此外，控制台中不会显示任何错误。

Answer 1

因为您没有执行箭头功能。您可以直接调用此方法。

componentWillMount(){
    console.log('componentWillMount executing...');
    this.props.ajaxRequestTriggeredMethod(); //Invoke directly
}

Answer 2

不是专家，但connect()函数返回

一个更高阶的React组件类，它将状态和动作创建器传递到从提供的参数派生的组件中

所以我的猜测是做这样的事情：

const randomNameForComponent = connect(mapStatetoProps, mapDispatchToProps)(BookListContainer);
export default randomNameForComponent;

并在RootComponent中，渲染randomNameForComponent而不是BookListComponent。

它应该做的伎俩。

将函数从mapDispatchToProps传递给react / redux app

2 个答案: