如何缩短 useReducer答案

【问题标题】：how to shorten useReducer如何缩短 useReducer
【发布时间】：2022-01-14 23:25:17
【问题描述】：

您好，我有一个问题，因为我决定使用“useReducer”挂钩来处理表单中的多个输入。我的组件如下所示。正如我们所看到的，有一个重复的代码。我想解决的是每个输入的“isValid”。是否有可能处理这个或者重复这个代码是可以的。我不是专业的，我只是在学习 React 你知道的，每个人都告诉我 DRY 原理。

const initialReducerValue = {
    name: '',
    lastName: '',
    phoneNumber: '',
    city: '',
    street: '',
    postal: '',
    nameIsValid: false,
    lastNameIsValid: false,
    phoneNumberIsValid: false,
    cityIsValid: false,
    streetIsValid: false,
    postalIsValid: false,
    formIsValid: false
}

const OrderForm = () => {

    const orderReducer = (state, action) => {
        if (action.type === 'HANDLE TEXT CHANGE') {
            
            return {
                ...state,
                [action.field]: action.payload,
                
            }
        }
    }

    const [formState, formDispatch] = useReducer(orderReducer, initialReducerValue)
    console.log(formState)

    const changeTextHandler = (e) => {
        formDispatch({
            type: 'HANDLE TEXT CHANGE',
            field: e.target.name,
            payload: e.target.value
        })
    }

    return (
        <div className={styles.orderForm}>
            <label htmlFor='name'>Name</label>
            <input onChange={changeTextHandler} id="name" name='name' type='text' />

            <label htmlFor='lastName'>Last Name</label>
            <input onChange={changeTextHandler} id="lastName" name='lastName' type='text' />

            <label htmlFor='phoneNumber'>Phone Number</label>
            <input onChange={changeTextHandler} id="phoneNumber" name='phoneNumber' type='number' />

            <label htmlFor='city'>City</label>
            <input onChange={changeTextHandler} id="city" name='city' type='text' />

            <label htmlFor='street'>Street</label>
            <input onChange={changeTextHandler} id="street" name='street' type='text' />

            <label htmlFor='postal'>Postal Code</label>
            <input onChange={changeTextHandler} id="postal" name='postal' type='text' />
            
            {<SendOrderButton isValid={formState.isValid} /> }
        </div>

        
    )
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我会创建一个对象，这样您就可以将action.field 与其对应的isValid 关联起来。您还可以附加一个验证函数。

const map = {
  name: { isValidName: 'nameIsValid' },
  // ..etc
}

在你的减速器中 -

const mapValue = map[action.field];
return {
  ...state,
  [action.field]: action.payload,
  [mapValue.isValidName]: true,
}

您可以使用验证器函数来代替 true，例如

[mapValue.isValidName]: mapValue.validator(action.payload)

【讨论】：