如何從下拉反應/ Redux更新產品列表

Question

我試圖了解如何使用react / redux過濾項目列表。 我已經建立了這個例子https://codesandbox.io/s/m3n0x7mqzj
我想要當我單擊類別時，產品category_id等於類別ID，然后返回具有相同ID的產品

action.js：-

export const selectCategory = (data) => {
console.log("You clicked on category: ", data.name);
return {
    type: 'CATEGORY_SELECTED',
    payload: data 

}

};

減速器category.js

export default function (state = null, action) {
switch (action.type) {
    case 'CATEGORY_SELECTED':
        return action.payload; 

    default:
        break;
}
return state;

}

category.js ：-

import React, { Component } from 'react';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import {selectCategory} from '../actions/index';

    class Category extends Component{

   renderList() {
    return this.props.Data.categories.map((user) => {
        return (

            <option
                key={user.id}
                onClick={() => this.props.selectCategory(user)}
            > 
                {user.name} 

            </option>
        );
    });
}

render() {
    return (
        <select>

            {this.renderList()}
        </select>
    );
}
  }


  function mapStateToProps(state) {
   return {
    Data: state.Data
     };
    }


function matchDispatchToProps(dispatch){
return bindActionCreators({selectCategory: selectCategory}, dispatch);
}
    export default connect(mapStateToProps, matchDispatchToProps)(Category);

Answer 1

您應該學到很多有關redux的知識並做出反應。

• 將所有狀態設置為redux，而不是組件的狀態。

• onChange函數應該在select元素上，我不明白為什么您在option元素上使用onClick 。

• 使用componentWillMount()或componentDidMount()首次在組件上獲取數據。 在該生命周期方法中使用redux操作。

• 在化簡文件上設置初始狀態，然后從操作中更改它。

這些是我的評論。 希望這會有所幫助！ 這是適合您的工作示例。 復習一下。

https://codesandbox.io/s/6wr900jq8r