onclick 事件在第一次点击时不更新状态

时间:2021-02-01 21:40:20

标签: reactjs redux react-redux

尝试创建带有验证的字段,如果字段为空,则弃用 onClick 操作,但在第一次单击时,我的弃用仅在第二次单击后才起作用并更新状态我希望我如何使用 react redux 状态管理无法在代码中看到我的错误原因我的组件

    const state = useSelector(state => state.fieldsReducer.fields);
    const dispatch = useDispatch();

    const AddTransaction =  () => {
         dispatch(fieldsValidation(state.title.value, state.amount.value));
        if (state.title.isCorrectValue || state.amount.isCorrectValue) {
            return false;
        }
        dispatch(addExpense(state.title.value, state.amount.value))
    };

    return (
        <div className='add-transaction-wrapper'>
            <div className='add-expense-inputs-wrapper'>
                <TextField
                    id='title'
                    label='title'
                    value={state.title.value}
                    onChange={e => dispatch(onHandleChange(e, e.target.id))}
                    error={state.title.isCorrectValue}
                />
                <TextField
                    id="amount"
                    label="expense amount"
                    type="number"
                    InputLabelProps={{
                        shrink: true,
                    }}
                    value={state.amount.value}
                    onChange={e => dispatch(onHandleChange(e, e.target.id))}
                    error={state.amount.isCorrectValue}
                />
                <button
                    onClick={() => AddTransaction()}
                    className='submit-button'
                >
                    Add transaction
                     </button>
            </div>
            <TransactionDash />
        </div>
    )

这是我的减速机

case VALIDATEFIELDS:
            // Object.assign(state.fields)
            return {
                ...state,
                fields: {
                    ...state.fields,
                    title: {
                        ...state.fields.title,
                        isCorrectValue: checkValue(action.payload.title) ? true : false
                    },
                    amount: {
                        ...state.fields.amount,
                        isCorrectValue: checkValue(action.payload.amount) ? true : false
                    }
                }
            }

她是我的行动创造者

export const fieldsValidation = (titleValue, amountValue) => (
    {
        type: types.VALIDATEFIELDS,
        payload: {
            title: titleValue,
            amount: amountValue
        }

    }
);

0 个答案:

没有答案