我有一个带有 useState Hook 的功能性 React 组件,并且有一个包含五个文本输入字段的数组。输入字段的值被注册在数组中的状态中。问题是,我想在每次输入内容时使用 onChange 监听器更新 inputfields 数组。然而,一旦我加载页面,函数(onChange监听器)就会立即无限循环地执行......这是为什么呢?
const addDublette = props => {
// constructor(props) {
// super(props);
// this.textInput1 = React.createRef();
// }
const [actualState, changeState] = useState({
showInputField: false,
dublettenIDs: [],
errorMessage: '',
inputFields: ['','','','',''],
}); ....
我更新状态输入值的方法:
const handleDoublettenIDs = (event,index) => {
let idnumber = event.target.value;
let newInputFields = [...actualState.inputFields];
newInputFields.splice(index,1, idnumber);
console.log(newInputFields);
if (isNaN(idnumber)) {
changeState({...actualState, errorMessage: 'ID is not a number'})
} if (idnumber > 2147483647) {
changeState({...actualState, errorMessage: 'Number can not be bigger than 2147483647!'})
}
else {
changeState({...actualState, inputFields: newInputFields, errorMessage: '' });
}
}
我的返回渲染方法:
return (
<p>
{
actualState.inputFields.map((val,index) => (
<InputElement key={index} elemValue = {val} name={"input" + index} onChangeListener={(event,index) => handleDoublettenIDs(event,index)} />
)
)
}
<p>{errorMessage}</p>
<br />
<p><button onClick = {handleInputs(props.anzeigeID)}>absenden</button></p>
</p> ...)
我使用 props.onChangeListener 属性将 onChangeListener 方法传递给我的 InputElement 组件“onChange”方法...
const inputElement = (props) => (
<p>
<input
value ={props.elemValue}
ref={props.reference}
name={props.name}
type="number"
max="2147483647"
placeholder="Doubletten-ID"
onChange={props.onChangeListener}>
</input>
</p>
)
export default inputElement
我认为问题可能出在循环更新依赖循环中,但我仍然没有找到在哪里以及如何...
最佳答案
问题是执行函数的按钮组件上的 onClick
<p><button onClick = {handleInputs(props.anzeigeID)}>absenden</button></p>
正确的做法是这样的
<p><button onClick = {() => handleInputs(props.anzeigeID)}>absenden</button></p>
关于javascript - 带有 useState 钩子(Hook)的 React 功能组件立即执行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56003359/