无法提供 defaultValue 作为表达式答案

【问题标题】：Cannot provide defaultValue as an expression无法提供 defaultValue 作为表达式
【发布时间】：2021-03-12 02:33:35
【问题描述】：

在下面的 React 组件中，为什么defaultValue={time} 可以工作，而defaultValue={time / 2} 不行（会显示空输入）？

请注意，我想保留useEffect 钩子，也不要将defaultValue 更改为value。

请在以下沙盒上试一试：

https://codesandbox.io/s/react-hooks-playground-forked-gn5yw?file=/src/index.tsx

const Input = () => {

    const [time, setTime] = React.useState()

    React.useEffect(() => setTime(1000), [])

    return <input defaultValue={time / 2} type="number" />
}

【问题讨论】：

如果您检查控制台，会出现错误：“Received NaN for the defaultValue 属性”。它不会因为初始值为undefined 而抛出错误。但是对于 undefined / 2，它是 NaN。 keep a variable type when I get value from input onchange with React-hooks
您可以设置一个初始值，如：React.useState(0)

标签： javascript reactjs

【解决方案1】：

defaultValue 是输入的被动原始值，这就是它不能在属性内部动态更改的原因，而 value 属性被视为可以更改的动态值。如果要动态设置 defaultValue，则必须在渲染组件之前在 useEffect 函数中进行。

const Input = () => {

    const [time, setTime] = React.useState()

    React.useEffect(() => setTime(1000 /2), [])

    return <input defaultValue={time} type="number" />
}

【讨论】：