React onChange 处理程序在页面加载期间被多次调用

React是一个流行的JavaScript库，用于构建用户界面。在React中，onChange是一个常用的处理程序，用于处理表单元素的值变化。然而，有时候我们会遇到一个问题，就是在页面加载期间，onChange处理程序会被多次调用。本文将探讨这个问题，并提供解决方法。

javascript
import React, { useState } from 'react';
function App() {
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  return (
    
      
      
{value}
    
  );
}
export default App;

javascript
import React, { useState, useEffect } from 'react';
function App() {
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  useEffect(() => {
    // 在组件加载完成后执行一次
    console.log('Component loaded');
  }, []);
  return (
    
      
      
{value}
    
  );
}
export default App;