Question

方案是： 1.按下按钮（A类组件）将一个项目添加到列表中（B类组件），然后重新呈现表格。

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

但是它没有重新呈现显示列表的Table。

任何人都可以帮忙吗？

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": {
      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);

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

中的尝试

Answer 2

这是问题区域。

return {
    ...state,
    products1
  };

将此行功能ReducersForSeach(state = initialState3, action) {更改为

function ReducersForSeach(state = initialState3.products1, action) {

Answer 3

尝试一下：：

products1 = {
  id: "456",
  abbreviation: "456",
  case_no: "456",
  created_dt: "31/01/2018",
  last_updated: "11:43:45"
});

return {
  ...state,
  products1: [...state.products1, products1]
};

通常，您将有效负载放在其中，并在分派操作时通过该对象发送。

赞：：

return {
  ...state,
  products: [...state.products, action.payload]
};

这假设products是一个数组，而您想将一个新项目.push()放入该数组。

我希望这会有所帮助。：）

更新：：
这是我用于产品的减速器的完整示例，每次调用时都会添加一个新的减速器。
我确实通过动作发送了对象。

减速器：

import {
    PRODUCTS,
} from '../constants/ActionTypes';

let products = []
if (localStorage.getItem('products') != undefined) {
  products = JSON.parse(localStorage.getItem('products'))
}

const initialState = {
  products: products
};

export default function (state = initialState, action) {
  switch (action.type) {
    case PRODUCTS:
      localStorage.setItem('products', JSON.stringify([...state.items, action.payload]))
      return {
        ...state,
        products: [...state.items, action.payload]
      }
      break;
    default:
      // console.log('Products reducer called: default');
      // console.log(action.type);
      break;
  }
  return state
}

action ::

export const addProduct = (obj) => {
  return {
    type: PRODUCTS,
    payload: obj
  };
};

这是index.js文件中的操作调用。

this.props.dispatch(addProduct(newItemObj));

我希望这是有道理的。

React-更新了商店，但没有重新渲染组件

3 个答案: