React - 无法将项目添加到 Redux 中的列表 [英] React - failed to add item to list in Redux

问题描述

场景是:1.按下按钮(A类-组件)将项目添加到列表(B类-组件).

The scenario is : 1.press a button(Class A-Component) to add a item to a list (Class B-Component).

列表的初始状态并且减速器中的 console.log('search action found') 完美运行.

The initialState for the list and the console.log('search action found') in reducers works perfectly.

但它未能在列表中再添加一项.

But its failed to add one more item in the list.

我在调用CLICK_SEARCH"操作后检查了商店.列表中的项目数 (products1) 仅剩余 1 个项目(初始状态为那个).任何人都可以帮忙吗?

I have checked the store after i called the "CLICK_SEARCH" action . The number of item in the List (products1) remaining 1 item only(initialState that one). Anyone can help ?

initialState3

 var initialState3 = {
        products1:[{
             id: "123",
              abbreviation: "123",
              case_no: "123",
              created_dt: "31/01/2018",
              last_updated: "11:43:45"

          }]
        }

减速器

function ReducersForSeach(state = initialState3, action) {
      switch(action.type) {
          case 'CLICK_SEARCH': {

          console.log("search action found");
            return {
                      ...state,
                      products1: [...state.products1,
                       { 
                        id: "456",
                        abbreviation: "456",
                        case_no: "456",
                        created_dt: "31/01/2018",
                        last_updated: "11:43:45"
                       }
                      ]
                     }

          }
          default :{
              return state
          }
      }
    }

组件

  var Table  = React.createClass({

      render() {
          const { products1 } = this.props;    
          const tableHeaderColumns = columnData.map((column) => (
                    <TableHeaderColumn 
                    dataField={column.action}
                    isKey={column.isKey}
                    dataSort={column.dataSort}
                    >
                      {column.description} 
                    </TableHeaderColumn>   
                  ))


        return ( 
          <BootstrapTable  height='600'  style={{overflowY:"scroll"}} data={ products1 } options={ options } >
          {tableHeaderColumns}
          </BootstrapTable>
        );
      }
    })

连接

 function mapStateToPropsFortable(state) {  
        return {  
            products1: state.reducreForSeach.products1
        }  
    }  

    const Table1 = connect(mapStateToPropsFortable,null)(Table);


ReactDOM.render(
        <Provider store={store}>
          <Table1/>  
          </Provider>,

        document.getElementById('divReqListTable')
        );

商店

var rootReducer = Redux.combineReducers({
    reducreForAge,
    reducreForButtonGroup2,
    reducreForSeach
});

var store = Redux.createStore(rootReducer)

推荐答案

在reducer中，不要改变状态，试试这个.

In the reducer, instead of mutating the state, try this.

function ReducersForSeach(state = initialState3, action) {
  switch(action.type) {
      case 'CLICK_SEARCH': {

      console.log("search action found");
      let {products1} = state;
      products1.push(  { 
                    id: "456",
                    abbreviation: "456",
                    case_no: "456",
                    created_dt: "31/01/2018",
                    last_updated: "11:43:45"
                   })
        return {
                 ...state, products1
                 }

      }
      default :{
          return state
      }
  }
}

这篇关于React - 无法将项目添加到 Redux 中的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！