我必须知道为什么总是在控制台中关闭错误代码



它实际上是在我的目的工作,例如,它必须在屏幕上显示我的分钟。然而,当我执行代码控制台显示总是错误。我真的很想知道为什么他们给我显示错误,真的想修复它。

所以我的代码基本上是这样的:
<!DOCTYPE html> 
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes(event.target.value);
};
return (
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
<h4>You want to convert {minutes}</h4>
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
像 这样的错误代码
react-dom.development.js:61 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
at input
at div
at App (<anonymous>:10:31)

我想知道为什么这件事会发生在我身上,我该怎么做才能弄清楚。

必须初始化useState钩子为0

const [minutes, setMinutes] = React.useState(0);

有一些东西正在渲染你的应用程序,当它是未定义的一段时间,它接收数据,它成为定义这是一个不受控制的行为。试着检查哪个州是这样做的。在你的代码中给你的分钟状态一个默认值。

最新更新