ReactJS: Как отобразить полученный ответ json на тот же компонент формы, который я использовал для отправки значения?

Question

Я работаю над поиском форм.

Answer 1

Это способ обновления входного значения на основе ответа:

...
.then((res) => {
      document.querySelector('input[name="name"]')[0].value = response.data;
})
...

Я предполагаю, что response.data - это текстовое значение, если его нет, вам необходимо предоставить дополнительную информацию о response.data. как предоставление console.log (response.data) в вашем сообщении.

Answer 2

Вы можете использовать async / await для обещания.

Сначала сделайте метод handleSubmit asyn c:

handleSubmit = async (e) => {...

Затем убедитесь, что вы ожидаете ответа от почтового запроса. :

await response = axios.post(url, seedURL);

и установите данные в ответ на состояние компонента.

this.setState({ value: response.data.value });

Наконец, убедитесь, что используете значение в состоянии:

<input type="text" placeholder="Business Name" name="name" value={this.state.value} />

Answer 3

React выполнит повторную визуализацию вашего компонента при каждом изменении состояния. Поэтому простой способ сделать это - добавить свойство в состояние, в котором будет храниться ответ:

this.state = {
    seedURL: '',
    response: null,
    error: null,
};

Затем, когда вы получите ответ от запроса, вы обновите состояние:

  axios
    .post(url, seedURL)
    .then((res) => {
        this.setState({response: res, error: null});
    })
    .catch((err) => {
        this.setState({error: err, response: null});
    });

И тогда в вашем методе рендеринга вам нужно будет что-то сделать с ответом:

render(){
  const bizName = this.state.response ? this.state.response.data.name : "";

  return(
    //... other jsx
    <div className="name">
      <input type="text" placeholder="Business Name" name="name" value={bizName} />
    </div>
  );
}