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

Question

Внутри моей основной App.js componentDidMount() фазы жизненного цикла у меня есть запрос на получение услуги службы отдыха.

РЕДАКТИРОВАТЬ: включены полный UserForm.js

class App extends Component {
//  default state object
    constructor() {
    super();

    this.state = {
        schemas: []
    } 
}


  componentDidMount() {
     axios
      .get('/dataschema/list')
      .then(response => { 
           console.log(response)
           this.setState({
               schemas: response
           });
      })
      .catch(error => console.log(error.response));
 }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">App</h1>
        </header>

        <LinkButton />
        <UserForm schemas={this.state.schemas} />

      </div>
    );
  }
}

Этот запрос успешно возвращает массив схем (строк) (пока только 1) в сообщениях консоли

Response:
{
    "data": [
        "Phone Record"
    ]

Как я могу заполнить этот UserForm.js выпадающий список Phone Record, который был возвращен запросом получения axios

import React from 'react';
import PropTypes from 'prop-types';

class UserForm extends React.Component {
  constructor() {
    super();
    this.state = {schemas: []};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.data});
  }

  handleSubmit(event) {
    alert('The dataschema you picked is: ' + this.state.schemas);
    event.preventDefault();
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <label>
              Pick the dataschema to describe your data file:
                  <select value={this.state.value} onChange={this.handleChange}>
              { 
                (schemas && schemas.length > 0) && schemas.map((schema) => {
                  return (<option value="${schema.value}"> {schema.name}</option>);
                })
              }
              </select>
            </label>    
        </form>
      </div>
    );
  }
}
export default UserForm;

Answer 1

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

ОБНОВЛЕНО : я исправил несколько опечаток во фрагменте кода и предоставил способ обработки неопределенных схем.

ПРИМЕЧАНИЕ : Это должно направить вас в правильном направлении, вы должны быть в состоянии принять этот ответ и завершить свою работу.

class App extends React.Component {

  constructor() {

    this.state = {
      schemas: []
    }
  }


  componentDidMount() {

    axios
      .get('http://localhost:port/api/rest/dataschema/list')
      .then(response => {
        console.log(response)
        this.setState({
          schemas: response
        });
      })
      .catch(error => console.log(error.response));
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">App</h1>
        </header>
        <LinkButton />
        <UserForm schemas={this.state.schema} />
      </div>
    );
  }

}

class UserForm extends React.Component {

  render() {

    const schemas = this.props.schemas;

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Pick the dataschema to describe your data file:
              <select value={this.state.value} onChange={this.handleChange}>
                { 
                  (schemas && schemas.length > 0) && schemas.map((schema) => {
                    return (<option value={schema}> {schema}</option>);
                  })
                }
              </select>
          </label>
        </form>
      </div>
    )
  }
}

Answer 2

Решение для передачи записей в пользовательскую форму

  componentDidMount() {
     const self = this;
     axios
       .get('http://localhost:port/api/rest/dataschema/list')
       .then(response => { 
            console.log(response)
            self.setState({ phoneRecords: response })
     })
     .catch(error => console.log(error.response));
   }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">App</h1>
        </header>       
        <LinkButton />
      <UserForm phoneRecords={this.state.phoneRecords}/>        
    </div>
  );
}