Javascript onChange事件处理程序函数附带输入字段，用于更新应用程序的状态，第一次加载时执行一次，之后执行两次

我正在构建一个简单的表单，inputFields基本上是状态；它是一个包含输入的对象数组，调用更新状态的setInputsFields。。。 你看，我有一个成人：真实属性，我使用html表单中的复选框来更新此字段

问题：在应用程序的初始加载时，我观察到handleInputChange执行一次（handleInputChange称为logged once），然后在任何输入的每次更改后，此函数执行两次（handleInputChange称为logged 3、5、7等等）。。。除了它否定了我如何更新成人的逻辑：正确或错误状态之外，为什么要执行两次handleInputChange函数

export default function App() {


const [inputFields, setInputFields] = useState(()=>{
  return [{ userName:'', age: 0, adult: true}]
})


const handleInputChange = ({name, value, type}, index) => {
    setInputFields( prevInputField => {
        if(type === "checkbox"){
         console.log('handleInputChange called')
          prevInputField[index][name]=!prevInputField[index][name]
        } else{
          console.log('handleInputChange called')
          prevInputField[index][name]= value
        }
        return [...prevInputField]
    })
}

return(
  inputFields.map((inputField,index,inputFields)=> {
    return (
      <>
        <input type="text" id="userName" name="userName" value={inputField.userName} onChange={(event)=> handleInputChange(event.target,index)} />
        <input type="number" id="age" name="age" value={inputField.age}  onChange={(event)=> handleInputChange(event.target,index)} />
        <input type="checkbox" id="adult" value={inputField.adult} name="adult" defaultChecked={ inputField.adult ? true : false }  onClick={(event)=> handleInputChange(event.target,index)} />
     </>  
    )
  })
)//ends return



}// ends App

导出默认函数App（）{
常量[inputFields，setInputFields]=useState（（）=>{
return[{用户名：''，年龄：0，成人：true}]
})
常量handleInputChange=（{name，value，type}，index）=>{
setInputFields（prevInputField=>{
如果（类型==“复选框”）{
log（'调用handleInputChange'）
prevInputField[index][name]=！prevInputField[index][name]
}否则{
log（'调用handleInputChange'）
prevInputField[索引][名称]=值
}
返回[…prevInputField]
})
}
返回(
映射（（inputField，index，inputFields）=>{
返回(
handleInputChange（event.target，index）}/>
handleInputChange（event.target，index）}/>
handleInputChange（event.target，index）}/>
)
})
)//结束返回
}//结束应用程序

在此处添加它而不是注释，因为它需要一个代码示例@嗯，我在这里看到了

const{useffect，useState}=React
函数App（）{
常量[inputFields，setInputFields]=useState（（）=>{
return[{用户名：''，年龄：0，成人：true}]
})
常量handleInputChange=（{name，value，type}，index）=>{
setInputFields（prevInputField=>{
如果（类型==“复选框”）{
log（'调用handleInputChange'）
prevInputField[index][name]=！prevInputField[index][name]
}否则{
log（'调用handleInputChange'）
prevInputField[索引][名称]=值
}
返回[…prevInputField]
})
}
返回(
映射（（inputField，index，inputFields）=>{
返回(
handleInputChange（event.target，index）}/>
handleInputChange（event.target，index）}/>
handleInputChange（event.target，index）}/>
)
})
)
}
ReactDOM.render（，document.getElementById（“根”））

---

在此处添加它而不是注释，因为它需要一个代码示例@嗯，我在这里看到了

const{useffect，useState}=React
函数App（）{
常量[inputFields，setInputFields]=useState（（）=>{
return[{用户名：''，年龄：0，成人：true}]
})
常量handleInputChange=（{name，value，type}，index）=>{
setInputFields（prevInputField=>{
如果（类型==“复选框”）{
log（'调用handleInputChange'）
prevInputField[index][name]=！prevInputField[index][name]
}否则{
log（'调用handleInputChange'）
prevInputField[索引][名称]=值
}
返回[…prevInputField]
})
}
返回(
映射（（inputField，index，inputFields）=>{
返回(
handleInputChange（event.target，index）}/>
handleInputChange（event.target，index）}/>
handleInputChange（event.target，index）}/>
)
})
)
}
ReactDOM.render（，document.getElementById（“根”））

---

好的，经过数小时的搜索，这似乎是一个普遍的问题，也许更好的说法是“在react.js中更改甚至触发两次”

无论如何，我怀疑configs中有错误（请阅读设置），正如下一页正确地指导我的那样

默认情况下启用的是react.strictMode，它导致组件的双重渲染…

正如这里所建议的：

“StrictMode渲染组件两次（在开发中，而不是在生产中），以便检测代码中的任何问题并向您发出警告（这可能非常有用）。 如果您在应用程序中启用了StrictMode，但不记得启用了它，可能是因为您最初使用create react app或类似工具创建应用程序，默认情况下会自动启用StrictMode。”

---

我在index.js中禁用了strictMode，现在双重激发被停止了…

好的，经过数小时的重新搜索，这似乎是一个普遍的问题，也许解决这个问题的更好的短语是“在react.js中甚至激发两次”

无论如何，我怀疑configs中有错误（请阅读设置），正如下一页正确地指导我的那样

默认情况下启用的是react.strictMode，它导致组件的双重渲染…

正如这里所建议的：

“StrictMode渲染组件两次（在开发中，而不是在生产中），以便检测代码中的任何问题并向您发出警告（这可能非常有用）。 如果您在应用程序中启用了StrictMode，但不记得启用了它，可能是因为您最初使用create react app或类似工具创建应用程序，默认情况下会自动启用StrictMode。”

---

我在index.js中禁用了strictMode，现在双触发已停止…

我看不到名为getting logged twiceplease的handleInputChange，请确认您是如何在我的本地环境中对任何输入字段中的单个更改进行检查的；字符串在控制台中记录了两次…我看不到名为getting logged twiceplease的handleInputChange。请确认您在我的本地环境中是如何检查的