Оператор переключения неправильного поведения с React.js ⇐ Javascript

[Anonymous]

Я пытаюсь создать модальный в React, который имеет разные кнопки в зависимости от типа модала. (Предупреждения должны просто отображать кнопку «ОК», в то время как подтверждают, что следует отображать «ОК» и «Отмена».) Я пытаюсь использовать оператор переключателя для рендеринга различных компонентов кнопки в зависимости от типа подсказки. Однако при повторном рендере кнопки оповещения отображаются, даже если свойство opupup.type обновляется до opuptype.confirm вместо Popuptype.alert .
Сначала я подозревал, что родительский компонент фактически не повторно разбирался. Но я обнаружил, что могу изменить значение opup.text , и оно будет правильно обновлено при повторном render. Я также первоначально был передавать Popuppup.type в качестве опоры на Popupbuttons , но переход на usecontext () не решил проблему (несмотря на то, что, вероятно, была лучшая практика независимо).
Более того, когда я добавил консоли. Popuptype.confirm , но затем все еще рендеринг компонента alertbuttons вместо Conformbuttons компонент.
Rendering popup box with 1
Context updated, popup.type = 1
Alert buttons
1 is allegedly equal to 1
< /code>
Вывод следующего рендеринга: < /p>
Rendering popup box with 2
Context updated, popup.type = 2
Alert buttons
2 is allegedly equal to 1

Что происходит, почему это происходит, и как лучше всего это сделать?/* ********* *
* CONSTANTS *
*************/

const PopupType = Object.freeze({
ALERT: 1,
CONFIRM: 2
});

/* *************** *
* CONTEXT BUILDER *
*******************/
function usePopups() {
const popupContext = useContext(PopupContext); // PopupContext is an object, { type: (int), text: (str) }.
if(!popupContext) throw new Error(ERROR_CONTEXT);
return popupContext;
}

export { PopupContext };

/* *************** *
* REACT COMPONENT *
*******************/
function AlertButtons() {
return
OK

}

function ConfirmButtons({ onConfirm }) {
return
OK
Cancel

}

function PopupButtons() {
const { popup } = usePopups();

console.log(`Context updated, popup.type = ${popup.type}`);
switch(popup) {
case PopupType.CONFIRM:
console.log("Confirm buttons");
return ;
case PopupType.ALERT:
default:
console.log("Alert buttons");
console.log(`${popup.type} is allegedly equal to ${PopupType.ALERT}`);
return ;
}
}

function PopupBox() {
const { popup } = usePopups();
console.log(`Rendering popup box with ${popup.type}`);

return

{popup.text}





}

export default PopupBox;


Подробнее здесь: https://stackoverflow.com/questions/797 ... h-react-js