是否有可能获得价值 从使用axios发送回json响应的端点？

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>

我在向api提交帖子请求时使用了axios，但是一旦页面加载就可以触发axios get请求，这样我就能得到我需要的标题吗？

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

首先，将options数组添加到您的状态。

接下来，在你的axios功能中：

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

最后，在您的UI组件中（假设您已将之前的options作为同名变量提供）：

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

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

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

关于页面加载时触发API请求：熟悉React生命周期方法。 https://reactjs.org/docs/react-component.html

在这种情况下，我会去componentDidMount（）方法：

componentDidMount() {
  this.materialList();
}

如果您不打算使用redux来保存状态，那么您可能需要在此处调用setState（）以便将请求的结果保存在组件的状态中（如Nico所述）。