React useState预填值初始化：如何无需useEffect实现复杂逻辑？

我有一个包含输入组件的表单，该组件可能为空或预填数据，且为受控组件，因此我使用React的useState跟踪输入框的值。

简单实现如下：

export const MyComponent = props => {
    const [value, setValue] = useState(props.value || null)

    return <input value={value} type="text" />
}

但实际场景中，输入框初始状态的预填逻辑更为复杂，需要对props进行多层遍历及校验后才能初始化默认值。

我目前的实现方式是：

export const MyComponent = props => {
    const [value, setValue] = useState(null)

    useEffect(() => {
        if (props.one?.two?.[0].value !== 0) {
            const option = props.someList.find(x => x.id === props.one.two[0].value)
            if (option)
                setValue(option)
        }
    }, [])
    return <input value={value} type="text" />
}

但此时会收到警告，提示useEffect缺少依赖项，需将props的深层属性添加到依赖数组中。然而我仅希望useEffect在组件挂载/初始化时执行一次，不想在props更新时重复执行。请问是否有无需使用useEffect即可实现该复杂初始化的方法？

解决方案 #

当然可以，你可以直接把复杂初始化逻辑放到useState的初始值函数中，这样既能避免使用useEffect，又能保证逻辑只在组件初始化时执行一次。

方法1：直接传入初始化逻辑函数 #

useState支持传入一个函数作为初始值，这个函数仅在组件首次渲染时执行一次，完全匹配你的需求。把原本写在useEffect里的逻辑移到这个函数里即可：

export const MyComponent = props => {
    const [value, setValue] = useState(() => {
        if (props.one?.two?.[0].value !== 0) {
            const option = props.someList.find(x => x.id === props.one.two[0].value)
            if (option) {
                return option
            }
        }
        return null
    })

    return <input value={value} type="text" />
}

方法2：抽离独立初始化函数（优化可读性） #

如果初始化逻辑特别冗长，可将其抽成独立函数，让代码结构更清晰：

const getInitialInputValue = (props) => {
    if (props.one?.two?.[0].value !== 0) {
        const option = props.someList.find(x => x.id === props.one.two[0].value)
        if (option) {
            return option
        }
    }
    return null
}

export const MyComponent = props => {
    const [value, setValue] = useState(() => getInitialInputValue(props))

    return <input value={value} type="text" />
}

这种实现方式的优势：

• 彻底消除useEffect的依赖项警告
• 初始化逻辑仅执行一次，不会因props更新重复触发
• 逻辑归属更合理，符合useState初始值的设计意图

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