Question

我正在使用redux设置我的应用程序，而我是新手。我想进行onClick()事件以获取项目的ID ，但我收到了错误消息。

我在这里搜索了很多答案，但是它们对我没有太大帮助。文档说，我没有正确地执行我的操作，但是我没有找到很好的解释，仅以toDo为例，这对我来说还不够。

Products.js （我想要我的onClick()的地方）

import React, { Component } from "react";
import Navbar from "../navbar/Navbar";
import Product from "../lists/Product";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getItems } from "../../actions/getItems";
import { getDetails } from "../../actions/getDetails";

class Products extends Component {
  componentDidMount() {
    this.props.getItems();
  }
  render() {
    return (
      <div className="container-fluid products">
        <Navbar />
        <div className="container">
          <h1 className="title display-3 text-center pt-2">
            <b>Our Products</b>
          </h1>
          <div className="underline" />
          <div className="py-5">
            <div className="container">
              <div className="row">
                {this.props.shopItems.items.map(item => {
                  return (
                    <div
                      onClick={() =>this.props.getDetails(item.id)}
                      className="col-lg-3 col-md-6 col-sm-6 col-xs-9"
                      key={item.id}
                    >
                      <div className="card-deck">
                        <Product
                          name={item.name}
                          brand={item.brand}
                          img={item.img}
                          price={item.price}
                        />
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
Products.propTypes = {
  shopItems: PropTypes.object.isRequired,
  getDetails:PropTypes.func.isRequired
};
const mapStateToProps = state => ({
  shopItems: state.shopItems
});

export default connect(
  mapStateToProps,
  { getItems }
)(Products);

getDetails.js

import {SHOW_DETAILS} from './types';
import {data} from '../data/data';

export const getDetails = id => dispatch =>{
    const detailProduct = data.find(item => item.id === id)
    dispatch({
        type:SHOW_DETAILS,
        payload:detailProduct
    })
}

detailsReducer.js

import { SHOW_DETAILS } from "../actions/types";

const initialState = {
  detailProduct: {}
};
export default (state = initialState, action) => {
  switch (action.type) {
    case SHOW_DETAILS:
      return {
        detailProduct: action.payload
      };
    default:
      return state;
  }
};

index.js （根减少器）

import {combineReducers} from 'redux'
import itemsReducer from './itemsReducer'
import detailsReducer from './detailsReducer';

export default combineReducers({
    shopItems:itemsReducer,
    detailProduct:detailsReducer
})

Store.js

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from './reducers/index';


const initialState = {};
const middleware = [thunk];

let store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

我希望

：

将操作getDetails连接到组件Products.js。
设置onClick()来获取所需的项目ID 。
使用find()的ID作为其ID，接收状态下的信息 detailProduct。
没有错误。

错误：mergeProps参数的类型对象的值无效

0 个答案: