Question

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

列表的initialState 并且reducer中的console.log（“找到搜索操作”）可以正常工作。

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

调用“ CLICK_SEARCH”操作后，我已经检查了商店。列表（products1）中的项目数仅剩余1个项目（initialState表示一个）。有人可以帮忙吗？

initialState3

System.Environment

减速器

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

Answer 1

在化简器中，而不是改变状态，请尝试这样做。

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中的列表

1 个答案: