Реагировать на функциональный компонент с помощью ловушки useState немедленно - PullRequest
Новая
       41

Реагировать на функциональный компонент с помощью ловушки useState немедленно

0 голосов
/ 06 мая 2019

У меня есть функциональный компонент React с хуками useState, и у меня есть массив с пятью полями ввода текста. Значения полей ввода регистрируются в состоянии в массиве. Проблема в том, что я хочу обновлять массив inputfields с помощью прослушивателя onChange каждый раз, когда я что-то вводю. Однако, как только я загружаю страницу, функция (слушатель 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>  ...)

Я передаю метод onChangeListener в метод "onChange" компонентов InputElement со свойством props.onChangeListener ... 

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

Я думаю, что проблема может заключаться в циклическом цикле обновления зависимостей, но я до сих пор не выяснил, где и как ...

Ответы [ 2 ]

1 голос
/ 09 июля 2019

когда вы вызываете функцию (), как это, вы фактически выполняете ее. В противном случае, когда вы вызываете функцию по ссылке 'function', она будет выполняться, когда она вызывается событием, например щелчком!

1 голос
/ 06 мая 2019

Проблема в том, что ваш onClick на компоненте кнопки, где вы выполняете функцию 

<p><button onClick = {handleInputs(props.anzeigeID)}>absenden</button></p>

Правильный путь - это 

<p><button onClick = {() => handleInputs(props.anzeigeID)}>absenden</button></p>
...