使用 onClick 进行反应以将其发送到操作答案

【问题标题】：React using onClick to send it to action使用 onClick 进行反应以将其发送到操作
【发布时间】：2017-08-12 11:04:56
【问题描述】：

我正在尝试使用 onClick 将两种不同的状态信息发送到动作事件。

user.user.user_id 和 post.book_id 来自应用程序状态，我想将该信息传递给操作。

 <div 
      onClick={() => { this.props.addToMyPage({
                      user_id: user.user.user_id, book_id: post.book_id}) }}>
                Add this to my page
</div>

部分

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { selectBook } from '../actions/index';
import { addToMyPage } from '../actions/index';
import { Link } from 'react-router';
class BookDetails extends Component {
     componentWillMount() {
        this.props.selectBook(this.props.params.id);
    }
    render() {
        const {post} = this.props;
        const {user} = this.props;
        console.log("This Book", post)
        if(!post) {
           return <div>Loading...</div>
        }
        return (
            <div>

                <h1>Title: {post.title}</h1>
                <h2>Pages: {post.pages}</h2>
                <div>Reviews:</div>
                <div 
                    onClick={() => { this.props.addToMyPage(user.user, post) }}>
                    Add this to my page
                </div>

            </div>
        )

    }
}
function mapStateToProps(state) {
    return {
        post: state.books.post,
        user: state.user.post

    }
}
export default connect(mapStateToProps, {selectBook, addToMyPage})(BookDetails);

当我这样做时，它只传递 user.user 信息，并在谷歌控制台中显示

动作必须是普通对象。使用自定义中间件进行异步操作。

不完全确定这意味着什么。我已经在我的 index.js 文件中设置了中间件。

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import reducers from './reducers';
import routes from './routes';
import promise from 'redux-promise';

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.container'));

//动作

export function addToMyPage(user, post) {
    console.log("mypage" , user, post);
    const request = axios.post(`${ROOT_URL}api/mypage`, user, post);

    return {
        type: ADD_MYPAGE,
        payload: request
    }
}

【问题讨论】：

似乎更有可能问题出在您的addToMyPage 操作上，而不是您发布的代码上。确保您使用 redux-thunk 之类的东西进行异步操作，或者在您的操作中返回一个普通对象 function addToMyPage(user, post) { return { type: 'ADD_TO_MY_PAGE', user, post }; }
我刚刚添加了我的操作代码。在 console.log("mypage, user, post) 之前我拥有一切，并在下面评论了代码。这就是它触发普通对象错误的原因吗？
很可能这就是您收到该错误的原因，操作必须返回一个普通对象
感谢您的建议。我只是在没有返回语句的情况下对其进行测试。很高兴知道谢谢。

标签： javascript reactjs asynchronous

【解决方案1】：

Rob M 回答需要在您的操作文件中返回对象。我注释掉了引发错误的返回对象。

  function addToMyPage(user, post) { return { type: 'ADD_TO_MY_PAGE', user, post }; }

【讨论】：