Единственная проблема, которую я вижу в вашем коде, заключается в том, что вы пытаетесь передать второй аргумент в setInventory. Я не верю, что это работает с хуками, как с компонентами класса. Когда я пытаюсь ввести это в машинописный текст, он мгновенно вызывает ошибку.
Просто передайте фактические данные, которые вы пытаетесь отправить, а затем позвоните onSubmitInventory(inventory), например:
const onChangeWeapon = (e) => {
const newInventory = {...inventory, weapon: e.target.value};
setInventory(newInventory);
onSubmitInventory(newInventory);
};
Если вы нужно дождаться следующего рендеринга, чтобы вызвать onSubmitInventory, это должно быть useEffect в родительском элементе. Мой следующий вопрос: почему родителю нужно состояние, а у ребенка оно тоже есть состояние? Возможно, его следует поднять. Но я не уверен в этом, не увидев родителя.
Edit: ваша проблема только с console.log? Если вы запустите
const [state, setState] = useState(true);
// ...
setState(false);
console.log(state); // outputs true.
, значение состояния не изменится до следующего рендера. Вызов setState вызовет новый рендеринг, но пока это не произойдет, старое значение останется. Добавьте console.log состояния в родительский элемент только в теле, как здесь
const [inventory, setInventory] = useState({
water: 0,
soup: 0,
meds: 0,
weapon: 0,
});
console.log('I just rendered, inventory: ', inventory);
Вы увидите обновления!
Тот факт, что значение состояния не меняется, может укусить вы в этом случае:
const [state, setState] = useState(true); // closes over this state!
// ...
setState(!state); // closes over the state value above
setState(!state); // closes over the same state value above
// state will be false on next render
Поэтому я использую эту форму, если есть возможность, я дважды вызываю setState перед рендерингом:
const [state, setState] = useState(true);
// ...
setState(state => !state);
setState(state => !state);
// state will be true on next render