在 redux 存储更新时不触发 useEffect

问题描述

export default function Cart(props) {
  const dispatch = usedispatch();
  
  const branch = useSelector((state) => get(state,"vendor.currentBranch"));
const orderInput = useSelector((state) => get(state,"order.orderInputs"));

  const [orderResult,setorderResult] = useState(null);
  let orderItemLength = orderInput.length

  useEffect(() => {
    let payload = {
      branch_uuid: get(branch,"uuid"),menu_items: orderInput,};
    
    dispatch(calculateOrder(payload))
      .then((result) => {
        setorderResult(result);
      })
      .catch(() => {});
   
  },[orderInput]);

  const deleteItem = (index) => {
    remove(orderInput,(oi,i) => index === i);
    dispatch({
      type: ADD_ORDER_INPUT,payload: orderInput,});
  };

  return (
          <div className={styles.cartbody} id="scrollstyle-4">
            {map(get(orderResult,"orderItems",[]),i) => {
              return (
                <div className={styles.cartProductBox}>
                  <div className={styles.productName}>
                    <p className={styles.textRed}>
                      <span className={styles.qunatity}>
                        {get(oi,"quantity")}
                      </span>
                      {get(oi,"item_name")}
                      <Popconfirm
                        placement="rightBottom"
                        title={"Are you sure you want to remove this item?"}
                        onConfirm={() => {
                          deleteItem(orderInput,i);
                        }}
                        okText="Yes"
                        cancelText="No"
                      >
                        <DeleteOutlined />
                      </Popconfirm>
                    </p>
                    <span className={styles.subItem}>
                      {map(get(oi,"orderItemAddons",(oia,i) => {
                        return `${i === 0 ? "" : ","} ${get(
                          oia,"addon_type_name"
                        )} `;
                      })}
                    </span>
                  </div>

                  <div>
                    <div>
                      <span className={styles.qunatity}>
                        $ {round(get(oi,"item_amount"),2)}
                      </span>
                    </div>
                    <div style={{ marginTop: 10 }}>
                      {get(oi,[]).length > 0 && (
                        <span className={styles.addonPrice}>
                          $ {round(get(oi,"addon_amount"),2)}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
  );
}

这是我的reducer代码

import {
  ADD_SERVICE,ADD_ORDER_INPUT,ADD_CALculaTED_ORDER,} from "../../constants/ActionTypes";

const orderReducer = (
  state = { serviceType: null,orderInputs: [] },action
) => {
  switch (action.type) {
    case ADD_SERVICE:
      return { ...state,serviceType: action.payload };

    case ADD_ORDER_INPUT:
      return { ...state,orderInputs: action.payload };

    case ADD_CALculaTED_ORDER:
      return { ...state,orderInputs: action.payload };

    default:
      return { ...state };
  }
};

export default orderReducer;

在上面的代码中，当我从另一个组件添加订单项时，useEffect 被触发，但是当我删除 orderItem（如您在 deleteItem() 函数中看到的）时，我的 redux 商店没有触发 useEffect 被更新，我的 useEffect 触发器依赖项是 OrderInput 变量，如代码所示。 我还尝试将 useEffect 的依赖设置为 OrderInput

顺序数组的长度

请帮助我知道我做错了什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）