reactjs - React - 存储更新但没有重新渲染组件

Question

场景是： 1.按下按钮（A 类组件）将项目添加到列表（B 类组件）然后重新渲染表格。

我已经通过 store.getState() 检查了商店中的列表，并且在按下按钮后我已经完美地更新了商店中的列表。

但它没有重新渲染显示列表的表格。

任何人都可以帮忙吗？

初始状态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": {
      products1.push({
        id: "456",
        abbreviation: "456",
        case_no: "456",
        created_dt: "31/01/2018",
        last_updated: "11:43:45"
      });

      return {
        ...state,
        products1
      };
    }
  }
}

零件

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

把你的减速机改成这个

function ReducersForSeach(state = initialState3, action) {
  switch (action.type) {
    case "CLICK_SEARCH": {
      const products1 = {
        id: "456",
        abbreviation: "456",
        case_no: "456",
        created_dt: "31/01/2018",
        last_updated: "11:43:45"
      };
      return {
        ...state,
        products1: state.products1.concat(products1)
      };
    }
    default:
      return state;
  }
}

你点击试试https://codesandbox.io/embed/74108xyln0