Question

我在具有多个对话框的功能性React组件中使用useReducer。

它呈现为：

return (
    <div className="container">

        { /* All Dialogs go here */ }
        <AddProfileDialog open={isOpen.ADD_PROFILE} />
        <EditProfileDialog open={isOpen.EDIT_PROFILE} />
    </div>
)

我正在使用钩子来处理此组件中的内部状态。

我的userReducer看起来像

const [isOpen, dispatch] = useReducer((state, action) => {
        switch (action.type) {
            case 'ADD_PROFILE':
                return { ...state, ADD_PROFILE: true }
            case 'EDIT_PROFILE':
                return { ...state, EDIT_PROFILE: false }
            default:
                return state
        }
    }, [])

首先，我不确定这是否是处理多个对话框状态的正确方法。

还有，是否有一种方法可以将此组件中所有其他对话框的状态重置为默认状态（所有false），但所选对话框除外？

谢谢。

Answer 1

我认为useReducer和useState都可以在您遇到的情况下工作。但是useState在这里可能会更容易。没有复杂的逻辑或副作用，我们不必在这里利用useReducer。

const [open, setOpen] = useState({ADD_PROFILE:false,EDIT_PROFILE:false});

setOpen({...open, ADD_PROFILE:!open.ADD_PROFILE})

<div>
  < AddProfileDialog open={open.ADD_PROFILE}/>
  < EditProfileDialog open={open.EDIT_PROFILE}/>
</div>

但是，无论useReducer和useState都将导致状态更改，每次我们打开新对话框时，所有“打开的”对话框仍将重新呈现。您可能想使用React.memo是因为您的子组件太复杂了。

Answer 2

您可以执行以下操作，也可以添加取消操作。

const [isOpen, dispatch] = useReducer((state, action) => {
        switch (action.type) {
            case 'ADD_PROFILE':
                return { ...state, ADD_PROFILE: true, EDIT_PROFILE: false }
            case 'EDIT_PROFILE':
                return { ...state, EDIT_PROFILE: false, ADD_PROFILE: false }
            case 'CANCEL':
                return {...state, EDIT_PROFILE: false, ADD_PROFILE: false }
            default:
                return state
        }
    }, [])

使用useReducer处理React中多个对话框的打开/关闭的正确方法

2 个答案: