reactjs - React - 无法将项目添加到 Redux 中的列表

Question

场景是： 1.按一个按钮（A 类组件）将项目添加到列表（B 类组件）。

列表的 initialState 和 reducer 中的 console.log('search action found') 完美运行。

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

我在调用“CLICK_SEARCH”操作后检查了商店。列表中的项目数 (products1) 仅剩余 1 个项目（initialState 那个）。任何人都可以帮忙吗？

初始状态3

 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)

标签： reactjsredux

Answer 1

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

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
      }
  }
}