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

Question

我正在构建一个简单的表单，inputFields 基本上就是状态；这是一个带有输入的对象数组，handleInputChange 调用 setInputsFields 更新状态... 你看我有一个 adult:true 属性，我正在使用 html 表单中的复选框来更新此字段...

问题： 在应用程序初始加载时，我观察到 handleInputChange 执行一次 （handleInputChange 调用记录一次)，然后在任何输入的每次更改后，此函数都会执行两次 （handleInputChange 调用记录 3、5、7 等等） ... 除了以下事实它否定了我如何更新 adult:true 或错误状态的逻辑，为什么 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

Answer 1

在此处添加它而不是注释，因为它需要代码示例。 @mhk 在这里我观察到了它。

const {useEffect, useState} = React

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 (
      <div>
        <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)} />
     </div>  
    )
  })
)
}

ReactDOM.render(<App />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

在 re-search 几个小时后没问题，这似乎是一个普遍的问题，也许对这个问题更好的说法是“onChange 甚至在 react.js[=27 中触发两次=]"

任何方式，因为我怀疑配置中有问题（阅读设置），因为下一页正确地指导了我这个 https://www.mmbyte.com/article/91391.html

这是默认启用的 react.strictMode，它导致组件双重渲染...

也按照此处的建议： My React Component is rendering twice because of Strict Mode

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

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

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

onChange event handler function attached with input field to update the state of the app executes once on first load and twice afterwords

javascript

reactjs

react-hooks

use-state