从遗留状态到 useReducer 嵌套元素 React

Question

我有这个遗留代码，其中我们将高度作为一个对象嵌套在其中，

在我们像这样改变高度之前

 this.setState(prevState => ({
    height: {
    ...prevheight,
    [heightUnit]: heightValue
    }
   }));

我把上面的代码变成了这样的调度

const onChangeHeight = useCallback((heightValue, heightUnit) => {
    dispatch({ type: 'height-change', [heightUnit]: heightValue });
    clearErrors();
  }, [clearErrors]);

    case 'height-change': return { ...state, height: { ...state.height, heightUnit: action.heightUnit }};

但是返回的值是未定义的，我是否正确地将代码从 class 组件转换为功能组件？

Answer 1

const onChangeHeight = useCallback((heightValue, heightUnit) => {
    dispatch({ type: 'height-change', heightUnit, heightValue });
    clearErrors();
  }, [clearErrors]);

case 'height-change': return { ...state, height: { ...state.height, [action.heightUnit]: action.heightValue }};

方括号表示 heightUnit 是从 onChangeHeight 函数获取值的高度对象中的键

从遗留状态到 useReducer 嵌套元素 React

from legacy state to useReducer nested elements React

reactjs

react-hooks

react-functional-component

use-reducer