Reactjs 反应-存储已更新，但未重新呈现组件

情况是： 1.按下按钮（a类组件）将项目添加到列表（B类组件），然后重新呈现表格

我已经逐个store.getState（）检查了store中的列表，按下按钮后，我完全更新了store中的列表

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

有人能帮忙吗

初始状态3

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

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

var store = Redux.createStore(rootReducer);

减速器

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

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

组件

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

---

这就是问题所在

return {
    ...state,
    products1
  };

将此行函数

ReducersForSeach（state=initialState3，action）{

更改为

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

---

将减速器换成这个

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

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

您在

中单击“尝试”：

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
}   

行动：

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

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

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

---

我希望这是有意义的。

只需更改这一行=>函数状态=初始状态3.products1？？问题区域如何？THXconcat返回“array”，使用array包装数组将导致嵌套数组！这不会解决问题。我已经尝试了您的代码，在分派操作后，存储区中的列表和UI都没有更新：/列表中仍有一个项目只有我问题中的减速机可以将项目添加到存储：（@OliverCheng，我在sandbox中配置了与你的应用程序非常相似的应用程序，它运行良好。请尝试一下THx Kyaw Kyaw Soe我在sandbox上看到了你的示例，它运行正常，但在我的应用程序上仍然不起作用。我会研究它。非常感谢！！！我已经尝试了你的代码，在发送操作后，商店中的列表没有更新：/在list@OliverCheng刚刚更新了我的工作方式。这可能会帮助你厌倦我的代码吗？