Как записать ответ с сервера в определенный инпут?

Question

[smir11]

Здравствуйте, динамически создаются инпуты, отправляю запрос на сервер с помощью асинхронной функции, приходит ответ в виде "value": ['value'], как записать ответ в инпуты?

Answer 1

[Александр]

https://www.w3schools.com/jsref/prop_text_value.asp

Answer 2

[Вадим Лебеденко]

Допустим, у нас пришел ответ.

let result = {"value":["habr"]} // Ответ с сервера

let inp = document.querySelector("my-input") // my-input - твой input (id или class, надеюсь знаешь как это работает)
inp.value = result["value"][0]

Всё просто. Если я не так понял - пиши.

Comments

[smir11]

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

handleFormChange(index,event)} type="text" />

id и класса тут нет, может только индекс через консоль логи

[smir11]

попробовал твой способ Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value') выдает ошибку, использую асинхронную функцию и аксиос

[Вадим Лебеденко]

smir11, возможно, что в объекте указано другое имя. То есть вместо "{"value":[]}" у вас, к примеру, "{"text":[]}"

[Вадим Лебеденко]

smir11, под функцию - без проблем.

function updateInput(inputs, values) {
     let i = 0
     // Немного не понял на счёт инпутов, если у вас есть массив с ними, то строчку ниже писать не нужно, если нет - то в параметрах функции уберите "inputs"
     let inputs = document.querySelectorAll("input") // Все инпуты в документе
     while (i<inputs.length) {
          let curInput = inputs[i]
          curInput.value = values[i[
          i++
     }
}

Вроде бы так.

[smir11]

Вадим Лебеденко, спасибо, у меня заработало так, НО есть проблема :

async function fetchMeasure(){
const response = await axios.get('/measure')
let data=[...inputDinamic]
data[0].calipers= response.data["input_data"][0]

setInputDinamic(data)

console.log(response)


}

Смотрю в логи, значение лежит в ячейке определенного инпута, но в самом инпуте нет отображения, как это можно исправить?

[smir11]

Вадим Лебеденко, значение записалось в стейт нужного инпута , но не отобразилось в самом инпуте

[Вадим Лебеденко]

smir11, А у вас какой тип инпута создаётся? Попробуйте заменить .value на .placeholder. Либо в крайнем случае, .innerHTML.

[smir11]

Вадим Лебеденко, тип инпута text, типа вместо value заменять плейсхолдер инпута? просто в самом состоянии инпута есть значение, на странице же инпут пустой

[Вадим Лебеденко]

smir11, Сейчас разбираюсь с этим, хочу понять, почему не меняется состояние на странице

[smir11]

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

[Вадим Лебеденко]

Только что проверил у себя, по идее всё должно работать. Может дело в том, какое вы передаёте значение?

[smir11]

Вадим Лебеденко,

.handleFormChange(index,event)} type="text" />

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

[Вадим Лебеденко]

smir11, почему именно через setState? Попробуйте просто elem.value. Или есть свои причины?

[smir11]

Вадим Лебеденко, можно поподробнее про elem.value, мне нужно чтобы значение и в состоянии хранилось, я думал через сет стейт отобразится в инпуте

[Вадим Лебеденко]

smir11, смотри, у тебя есть ссылка на элемент в коде, примем её за "elem". Попробуй, когда записываешь в состояние, записать ещё и в html страницу. То есть ещё и добавить elem.value = ...

Ещё рекомендую через Ctrl+Shift+C посмотреть на инпут. В нём должно быть "value="text""

[smir11]

Вадим Лебеденко, инпуты создаются динамически, так с ссылками не прокатит, наверное

[Вадим Лебеденко]

smir11, а есть возможность при создании инпута добавлять ему id? То есть:

let input = document.createElement("input")
input.id = "my_id"

[smir11]

Вадим Лебеденко, по идее у меня там в массиве есть индекс, могу в сам инпут записать id,тогда как его увеличивать?

[Вадим Лебеденко]

Можно записывать прошлое значение индекса в переменную, и при каждом новом создании добавлять к нему 1. Если я правильно понял, о чем речь.

[smir11]

smir11, или id сделать именно для тех инпутов , в которые записываю данные, тогда по индексам просто пробегаться массива? не знаю как точнее сказать

[Вадим Лебеденко]

У тебя нет случайно дискорда или телеграмма, чтобы там списаться? Так удобнее будет

[smir11]

Вадим Лебеденко, скину попозже, я там объясню подробнее

[Вадим Лебеденко]

Ок. Жду

[Вадим Лебеденко]

или id сделать именно для тех инпутов , в которые записываю данные, тогда по индексам просто пробегаться массива? не знаю как точнее сказать

По поводу этого. Айди у каждого элемента должен быть уникальный. Можно присваивать его по индексу. То есть:

funtion addId(elem, index) {
     elem.id="input_"+index
}

[smir11]

Вадим Лебеденко, я все равно не могу понять, почему через set state он изменяет состояние и значение в инпуте, а на странице не отображает, код выше скинул

[Вадим Лебеденко]

Я и сам не понимаю, почему оно не работает. Никогда не сталкивался с setState, если честно

[smir11]

Вадим Лебеденко, там setInputDinamic, на котором хук useState,отдаю ему при запросе массив даты, где содержится прошлый массив inputDinamic,со измененным одним инпутом

[smir11]

Вадим Лебеденко, Donon#9828 discord

Answer 3

[strelok011]

если разговор про реализацию в React - то вопрос, какие именно инпуты используются в вашем проекте - контролируемые или нет?
Неконтролируемый uncontrolled

const { useRef } from 'react';

function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

Контролируемый (а еще их называют тупыми) сontrolled

const { useState } from 'react';

function Controlled () {
  const [email, setEmail] = useState();

  const handleInput = (e) => setEmail(e.target.value);


  return <input type="text" value={email} onChange={handleInput} />;
}