![](/img/trans.png)
[英]Calling a state update function within a state update function - useState hook in React Functional component
[英]React functional component with useState hook executes function immediately
我有一个带有useState挂钩的功能性React组件,并且我有一个包含五个textinput字段的数组。 输入字段的值以状态存储在数组中。 问题是,我想在每次输入内容时都使用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
on按钮组件
<p><button onClick = {handleInputs(props.anzeigeID)}>absenden</button></p>
正确的方法是这样
<p><button onClick = {() => handleInputs(props.anzeigeID)}>absenden</button></p>
当您像这样调用“ function()”时,实际上是在执行它。 否则,当您通过引用“函数”调用函数时,将在事件(如单击!)调用该函数时执行该函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.