Можно ли получить значения для <options>от конечной точки, которая отправляет ответ json, используя axios?

Question

Итак, у меня есть конечная точка: http://127.0.0.1:8000/api/materials, которая возвращает этот ответ json:

{
"data": [
    {
        "uuid": "05a36470-d0a0-11e7-91b4-ff3d7d9f961a",
        "title": "Apple",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:45:36",
        "updated_at": "2017-11-24 06:45:36",
        "deleted_at": null
    },


    {
        "uuid": "2048f730-bfa0-11e7-95fb-6dceb95ba437",
        "title": "Banana",
        "viewing_time": 15,
        "description": "It's a fruit",
        "organization_id": null,
        "created_at": "2017-11-02 15:33:31",
        "updated_at": "2017-11-02 15:33:31",
        "deleted_at": null
    },


    {
        "uuid": "3b6a1020-d0a0-11e7-b6bb-d77fc76d610b",
        "title": "Strawberry",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:47:06",
        "updated_at": "2017-11-24 06:47:06",
        "deleted_at": null,
    },

Я хочу выбрать все заголовки и задать им параметры.и это моя функция, где axios называется:

materialList = () => {
    var token = localStorage.getItem('jwt');
    var apiBaseUrl = "http://127.0.0.1:8000/api/materials";

    var config = {
      headers: {
        'Authorization': "bearer " + token,
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      withCredentials: false
    }

    axios.get(apiBaseUrl, config)
    .then(function (response) {
      console.log(response);

  })
  .catch(function (error) {
  console.log(error);
  });
  }

, и именно здесь я хочу, чтобы заголовки (Apple, Banana и Strawberry) появлялись:

            <Form.Input list='material' placeholder='Material' name="material_id" id="material_id" onChange={this.onChange}/>
            <datalist id='material_id'>
                <option value=/** What do I put here **/ />

            </datalist>

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

Answer 1

Сначала создайте переменную состояния, как показано ниже в вашем компоненте.

constructor(props) {
    super(props);
    this.state = {
        options: []
    }
}

Теперь вы можете использовать componentDidMount () , чтобы получить эти значения из API, как показано ниже.

componentDidMount() {
 const token = localStorage.getItem('jwt');

 const apiBaseUrl = "http://127.0.0.1:8000/api/materials";

 const config = {
  headers: {
    'Authorization': "bearer " + token,
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
 }

 axios.get(apiBaseUrl, config)
  .then((response) => {
    this.setState({
      options: response.data
    })
   })
  .catch((error) => {
    console.log(error);
   });
}

Теперь вы можете использовать эту переменную состояния для отображения в опции.

render() {
 const { options } = this.state;

 return(
  <Form.Input list='material' placeholder='Material' name="material_id" id="material_id" onChange={this.onChange}>
   {options.map((item, index) => <option key={index} value={item.uuid}>{item.title}</option>)}
  </Form.Input>
 )
}

Answer 2

По поводу запуска запроса API при загрузке страницы: ознакомьтесь с методами жизненного цикла React.https://reactjs.org/docs/react-component.html

В этом случае я бы использовал метод componentDidMount ():

componentDidMount() {
  this.materialList();
}

Если вы не планируете использовать избыточный код для сохранения состояния, вам, вероятно, потребуетсявызовите setState () здесь, чтобы сохранить результат вашего запроса в состоянии вашего компонента (как описано Нико).

Answer 3

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

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

class YourComponent {
    // Use componentDidMount to get the data via axios
    componentDidMount() {
        // ... Your code to prepare the axios call

        /* 
         * Use arrow function to keep refer to React component `this`
         * and sae the response data to the component state
         */
        axios.get(apiBaseUrl, config)
          .then(
             response => this.setState({options: response.data})
          )
          .catch(function (error) {
             // handle the error here
          });
    }

    render() {
        // Options will have the same format as your response data
        const { options } = this.state;

        return (<datalist id='material_id'>
            {options.map(option =>  
               <option value={/* can be any attribute you want from the result object, like id, title, ..etc*/}>
                 {option.title}
               </option>)}
        </datalist>);
    }
}

Answer 4

Сначала добавьте массив options в ваше состояние.

Затем, в вашей функции axios:

axios.get(apiBaseUrl, config)
.then(response => {
    this.setState({
        options: response.data.map(item => item.title),
    });
})

Наконец, в вашем компоненте пользовательского интерфейса (если вы сделалиoptions из ранее доступных как переменная с тем же именем):

const optionList = options.map(option => <option value={option} />)

render() {
    return (
        // Other JSX here..
        <datalist id='material_id'>
           {optionList}
        </datalist>
    )
}