Есть функция orderButtonOnClick, которая используя значения props формирует заказ. Она нормально работает, если происходит клик по кнопке. Но нужно также отправлять заказ по нажатию клавиши Enter. И тут происходит неприятное - значения props берутся такие, как при первом ренедеринге. Те. не происходит обновления address. В отладчике изменения состояния видны. Не понимаю, в чем причина?
const ContactDetailsForm = props => {
const address = props.state.address;
const [contactDetails, setContactDetails] = useState([
{
name: 'address',
value: address,
title: 'Address'
}
]);
const [activeElement, setActiveElement] = useState('contact-details-form');
useEffect(() => {
setContactDetails([
{
name: 'address',
value: address,
title: 'Address'
}
]);
}, [address]);
useEffect(() => {
const onKeyDown = e => {
if(e.keyCode === 13) {
orderButtonOnClick();
}
};
document.addEventListener('keydown', onKeyDown);
return () => {
document.removeEventListener('keydown', onKeyDown);
};
}, []);
const changeInputValueHandler = e => {
const {name, value} = e.target;
let newContactDetails = [...contactDetails];
newContactDetails.map(input => {
if(input.name === name)
input.value = value;
return input
});
setContactDetails(newContactDetails);
dispatch(changeInputValue({name,value}));
};
const orderButtonOnClick = () => {
const newOrder = {
address
};
console.log(address);
dispatch(insertOrder(newOrder));
}
};
const dispatch = props.dispatch;
return(
<section>
<form>
{contactDetails.map(input => {
return <FormInput key={input.name}
title={input.title}
name={input.name}
value={input.value}
changeInputValue={changeInputValueHandler}/>
}
)}
</form>
<button onClick={orderButtonOnClick}>Order</button>
</section>
);
};