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

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

我正在构建一个简单的表单， inputFields 基本上是状态；这是具有输入的对象数组，并且 handleInputChange 调用 setInputsFields 来更新状态... 您会看到我有一个adult：true属性，即时通讯使用html表单中的复选框来更新此字段...

问题：：在应用的初始加载上，我观察到 handleInputChange 会先执行一次（（handleInputChange被记录一次），然后在每次更改后执行在任何输入中，此函数都会执行两次（handleInputChange称为已记录的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

解决方法

在此处添加它而不是注释，因为它需要一个代码示例。 @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>

,

经过数小时的研究，好吧，这似乎是一个普遍的问题，也许对此问题的更好的表述是“ onChange甚至在react.js中触发两次”

任何方式，因为我怀疑配置中有错误（将其读取），如下页正确地指示了我这一点 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，现在停止了两次触发...