javascript - 带有 useState 钩子(Hook)的 React 功能组件立即执行函数

标签 javascript reactjs events state react-hooks

我有一个带有 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/

相关文章:

javascript - 在 redux thunk 中捕获

javascript - 如何用三元运算符重构它?

node.js - socket.io 广播不适用于 React

javascript - event.pageX/Y 不适用于 touchmove

android - 平滑平移问题——每秒触摸次数少

javascript - 大十六进制数的运算

javascript - 为 html/css/javascript 游戏创建一个无休止的 javascript 函数

javascript - getjson 函数成功后将 div 分割为 3 并附加到正文

javascript - 为什么我的指令没有显示?

c# - 对于生命周期较短的对象,是否需要取消订阅事件?