React redux - 映射对象时 useSelect() 和 useDispatch()

Question

//state.buttons is an array - it is used to map buttons to a menu

function NavMenu() {
  const buttons = useSelector((state) => state.buttons);
  const dispatch = useDispatch();

  const navButtons = buttons.map((button) => {
    const checkDirection = (button) => {
      if (button.pageNo >= button.prevPageNo) {
        dispatch(updateButtonsData({ newDirection: 1 }));
      } else {
        dispatch(updateButtonsData({ newDirection: -1 }));
      }
    };
    checkDirection(button);

    return (
      <li key={button.id} >
          <NavButton buttonData={button} />
      </li>
    );
  });

  return <ul>{navButtons}</ul>;
}

export default NavMenu;


//buttonSlice 

const initialState = [
  {
    id: 'homeId',
    prevPageNo: null,
    pageNo: 1,
    direction: 1,
    firstAnimFrame: 1,
    lastAnimFrame: 1,
  },
  {
    id: 'aboutId',
    prevPageNo: null,
    pageNo: 2,
    direction: 1,
    firstAnimFrame: 1,
    lastAnimFrame: 11,
  },{...}

const buttonsSlice = createSlice({
  name: 'ui',
  initialState,
  reducers: {
    updateButtonsData: {
      reducer(state, action) {
        state = action.payload;
      },
      prepare(
        id,
        newPrevPageNo,
        pageNo,
        newDirection,
        newFirstFrame,
        newLastFrame
      ) {
        return {
          payload: {
            id,
            prevPageNo: newPrevPageNo,
            pageNo,
            direction: newDirection,
            firstAnimFrame: newFirstFrame,
            lastAnimFrame: newLastFrame,
};},},},},});

你好，我有一个导航菜单，当用户按下按钮时，必须在 UI 内动态更新几个参数。 根据按下的前一个按钮（按下按钮的顺序很重要），每个按钮的行为会有所不同。 我的解决方案是将导航按钮数组的初始状态与每个后续重新映射进行比较。 我认为将先前按下的按钮的历史记录存储为导航对象数组中的值会很好。 每次刷新导航时，都会添加新参数并作为映射按钮内的道具访问，然后可以在单击时访问。

目前，dispatch 函数不适用于我的代码，映射的按钮数组保持不变。

Answer 1

我假设您是通过checkDirection(button);来“触发”更新数据checkDirection(button); 而不是onClick事件。

首先这是一个“禁止”代码：

  const navButtons = buttons.map((button) => {
    const checkDirection = (button) => {
      if (button.pageNo >= button.prevPageNo) {
        dispatch(updateButtonsData({ newDirection: 1 }));
      } else {
        dispatch(updateButtonsData({ newDirection: -1 }));
      }
    };
    checkDirection(button);

    return (
      <li key={button.id} >
          <NavButton buttonData={button} />
      </li>
    );
  });

  return <ul>{navButtons}</ul>;
}

如果你想在渲染一个元素时触发一个函数，把它放在 useEffect 里面而不是“外面”。

因此，在 NavButton 中传输该代码，例如：

    const checkDirection = useCallback(button) => {
      if (button.pageNo >= button.prevPageNo) {
        dispatch(updateButtonsData({ newDirection: 1 }));
      } else {
        dispatch(updateButtonsData({ newDirection: -1 }));
      }
    }, []);

   useEffect(() => checkDirection(button), [checkDirection, button]);