尝试创建带有验证的字段,如果字段为空,则弃用 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
}
}
);