Javascript 是否可以获取<；的值；选项>；从使用axios发回json响应的端点？_Javascript_Reactjs_Semantic Ui React

Javascript 是否可以获取<；的值；选项>；从使用axios发回json响应的端点？

javascript reactjs

Javascript 是否可以获取<；的值；选项>；从使用axios发回json响应的端点？,javascript,reactjs,semantic-ui-react,Javascript,Reactjs,Semantic Ui React,因此，我有一个端点：将返回此json响应： { "data": [ { "uuid": "05a36470-d0a0-11e7-91b4-ff3d7d9f961a", "title": "Apple", "viewing_time": 15, "description": "", "organization_id": null, "created_at": "2017-11-24 06:45

因此，我有一个端点：将返回此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);
  });
  }

这就是我希望标题（苹果、香蕉和草莓）出现的地方：

            <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提交post请求时使用了axios，但我能否在页面加载后立即触发axios get请求，以便获得所需的标题？

首先，在您的状态中添加一个

选项数组
接下来，在axios函数中：
axios.get(apiBaseUrl, config)
.then(response => {
    this.setState({
        options: response.data.map(item => item.title),
    });
})

最后，在您的UI组件中（假设您已将先前的选项
作为同名变量提供）：
const optionList=options.map（option=>）
render（）{
返回(
//其他JSX在这里。。
{选项列表}
)
}
首先，在您的状态中添加一个选项
数组
接下来，在axios函数中：
axios.get(apiBaseUrl, config)
.then(response => {
    this.setState({
        options: response.data.map(item => item.title),
    });
})

最后，在您的UI组件中（假设您已将先前的选项
作为同名变量提供）：
const optionList=options.map（option=>）
render（）{
返回(
//其他JSX在这里。。
{选项列表}
)
}
关于页面加载时API请求的触发：
让自己熟悉React生命周期方法。

在本例中，我选择componentDidMount（）方法：
如果不打算使用redux保存状态，则可能需要在此处调用setState（），以便将请求结果保存在组件状态（如Nico所述）。关于加载页面时触发API请求：
让自己熟悉React生命周期方法。

在本例中，我选择componentDidMount（）方法：
如果不打算使用redux保存状态，则可能需要在此处调用setState（），以便将请求的结果保存在组件的状态中（如Nico所述）。
我假设您发布的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>);
    }
}

class组件{
//使用componentDidMount通过axios获取数据
componentDidMount（）{
//…准备axios调用的代码
/* 
*使用箭头功能保持参考反应组件“此`
*和sae组件状态的响应数据
*/
get（apiBaseUrl，config）
.那么(
response=>this.setState（{options:response.data}）
)
.catch（函数（错误）{
//在这里处理错误
});
}
render（）{
//选项的格式将与响应数据的格式相同
const{options}=this.state；
返回(
{options.map（option=>
{option.title}
)}
);
}
}
我假设您发布的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>);
    }
}

class组件{
//使用componentDidMount通过axios获取数据
componentDidMount（）{
//…准备axios调用的代码
/* 
*使用箭头功能保持参考反应组件“此`
*和sae组件状态的响应数据
*/
get（apiBaseUrl，config）
.那么(
response=>this.setState（{options:response.data}）
)
.catch（函数（错误）{
//在这里处理错误
});
}
render（）{
//选项的格式将与响应数据的格式相同
const{options}=this.state；
返回(
{options.map（option=>
{option.title}
)}
);
}
}
首先在组件中创建一个状态变量，如下所示
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>
 )
}

render（）{
const{options}=this.state；
返回(
{options.map（（项目，索引）=>{item.title}）}
)
}
首先在组件中创建一个状态变量，如下所示
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>
 )
}

render（）{
const{options}=this.state；
返回(
{options.map（（项目，索引）=>{item.title}）}
)
}
但现在它说TypeError:options.map不是一个函数，但现在它说TypeError:options.map不是一个函数，但现在它说，TypeError:options.map不是一个函数像这样使用它：{options&&options.map（（项，索引）=>{item.title}}
和，您可以使用html选择标记而不是表单。输入首先检查您得到的响应是什么？这个错误是因为选项中没有数据，所以请检查您是否正确地从Axiosa获取响应，我已经将选项设置为response.data，具体取决于您提供的json响应。