React与Next.js中如何为函数解构参数设置默认值

你当前的函数用了对象解构的方式接收入参，直接在解构语法里配置默认值即可，同时要兼容完全不传参的调用场景，避免解构报错。

最终修改后的代码如下：

const getItems = async ({ shouldShuffle = false } = {}) => {
 // 你的业务逻辑代码
}

语法说明 #

• shouldShuffle = false：针对解构出的shouldShuffle字段设置默认值，当传入的参数对象中不存在shouldShuffle字段、或字段值为undefined时，参数会自动使用false作为默认值，调用时无需重复传入
• 入参位置末尾的= {}：给整个入参对象设置默认空对象，兼容直接调用getItems()（完全不传入任何参数）的场景——如果不加这层配置，无参调用时JS会尝试对undefined做解构操作，直接抛出类型错误

不同调用场景的参数取值参考 #

// 无参调用：shouldShuffle = false
await getItems()

// 传入空对象：shouldShuffle = false
await getItems({})

// 显式传true：shouldShuffle = true
await getItems({ shouldShuffle: true })

// 显式传false：shouldShuffle = false
await getItems({ shouldShuffle: false })

注意：JS解构默认值仅在对应值为undefined时生效，如果你主动传入null作为shouldShuffle的值，是不会触发默认值替换的，日常业务开发中基本不会遇到这类异常传参场景。

内容的提问来源于stack exchange，提问作者AWX MEDIA