如何从下拉反应/redux 更新产品列表答案

【问题标题】：How to updating product list from dropdown react/redux如何从下拉反应/redux 更新产品列表
【发布时间】：2018-12-20 02:33:12
【问题描述】：

我正在尝试了解如何使用 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 

}

};

reducer-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);

【问题讨论】：

您能否详细说明您的问题？看起来很模糊，很难理解。可能会有所帮助
我正在处理您的代码框，但您删除了您的问题！你的项目有很多错误。大多数事情都是错误的。减速器、状态、动作、生命周期……你应该在 redux 上工作并再次做出反应。我将从您的沙箱中给出工作示例，请不要删除问题。
@akcoban 哦，真的很抱歉，我不知道您正在处理我的代码和框请给我工作示例链接
@SyedSadaifRizvi 我想问你一个问题。为什么将数据存储在 reducer 中？通常你会从 ajax 请求中获取数据吗？
@akcoban 如何仅为输入字段上的数字添加验证codesandbox.io/s/5pn421y2p

标签： javascript reactjs redux

【解决方案1】：

你应该学习很多关于 redux 和 react 的知识。

在 redux 中设置所有状态，而不是在组件的状态中。
onChange 函数应该在 select 元素上，我没有了解您为什么在 option 元素上使用 onClick。
使用 componentWillMount() 或 componentDidMount() 获取数据第一次在组件上。在该生命周期内使用 redux 操作方法。
在你的 reducer 文件上设置初始状态并从操作中更改它。

这是我的评论。希望这可以帮助！这是适合您的工作示例。回顾这一点。

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

【讨论】：

谢谢 :) @akcoban
你能检查这个链接codesandbox.io/s/51l3p03mp我想当我在数量字段中写然后数量被添加到销售中并从可用中减去
@SyedSadaifRizvi codesandbox.io/s/vv15xx563l 这样。这是一个基本的方法。您还可以从 app.js 中操作您的函数和数据，而不是在组件中。比如，通过 props 向 products 组件发送数据。
你能在这个文件中检查我的 json 数据文件 reducer-data.js 吗？当我们在输入中写入数量时，我想要的部分折扣，然后折扣将生效@akcoban
您可以更新reducer中的数据，但是当您删除数量值时，可用和已售数据不会更改为默认值。例如：Available: 10 并且您在数量输入中写了 5。当您将输入更改为 4 时，可用的将是 1。我认为最好的做法是在单击更新按钮时更新减速器数据。如果你想要这个，我可以编辑代码框。