Блог

У меня есть динамические поля для CRUD, и мне нужны данные обновления оттуда, для этого я должен установить значения данных, которые поступают через API. Функция отправки работает, форма обновляется, проблема в том, чтобы задать значения для входных данных. Сначала я думал о функции jquery ($document.ready), после этого я использовал useEffect hook, но оба варианта не работают, какая-нибудь помощь?, ниже приведен мой код.

 export default function Pros(){

const [pros, setPro] = useState([
    {pro: ''}
])

const changePro = e => {

    let proArr = [];
    let prosObject = [...pros]
        prosObject.map(x => {
        proArr.push(Object.values(x));
    })

    setPro({
        pro: proArr
    })

}

const submitPro = e => {
    const {pro} = pros;
}

const handleChangePro = (index, event) => {
    const values = [...pros];
    values[index][event.target.name] = event.target.value;
    setPro(values);
}

const handleAddPro = () => {
    setPro([...pros, {pro: ''}])
}

const handleRemovePro = () => {
    const values = [...pros];
    let index = values.length-1;
    values.splice(index, 1);
    setPro(values);
}

useEffect(() => {
    return () => {
        $("#createPro").val('pro number 1'); <------ that was the way what im doing it, but doesn't work
    };
}, [])

return(
    <div className="form-group">

            {
                pros.map((pro,index) => (
                    <div key={index} className="mb-3 input-group"> 
                        <div className="input-group-append input-group-text">
                            <i class="fas fa-list"></i>
                        </div>
                        <input id="createPro" onChange={event => handleChangePro(index, event)} type="text" className="form-control" name="pro" placeholder="set pro"/>

                    </div>
                ))
            }

            <div className="invalid-feedback invalid-pros"></div>


        <div className="row">
            <div className="col-12 justify-content-center d-flex" >
                <IconButton className="mb-1 justify-content-center" onClick={() => handleRemovePro()}> 
                    <RemoveIcon/>
                </IconButton>
                <IconButton onClick={() => handleAddPro()}>
                    <AddIcon/>
                </IconButton>
            </div>
        </div>
    </div>
);
 

}

Просто вам нужно value свойство для вашего элемента ввода, которое получает значение из переменной в вашем компоненте, предполагая, что у вас есть переменная

 let inputVal = 'some value'
 

вы можете иметь:

 <input value={inputVal} />
 

обратите внимание, что использование этой переменной с помощью useState hook поможет вам обновить значение при динамическом обновлении
, например:

 const [inputVal, setInputVal] = useState('some value')