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

Question

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

问题：在应用程序的初始加载时，我观察到handleInputChange执行一次（handleInputChange 称为记录一次），然后在任何输入的每次更改后，此函数执行两次（handleInputChange 称为记录的 3、5、7 等） ...除了它否定了我如何更新成人的逻辑：true 或 false 状态之外，为什么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

标签： javascriptreactjsreact-hooksuse-state

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>