Json 如何在reactJs中获取API

请建议一种获取API的方法，而不是从数据文件夹导入json文件

已编辑~我正在尝试获取一些数据（Api）作为我的 过滤的多选组件。非常新的反应，请建议

`从“React”导入React，{Component} 从“react filtered multiselect”导入FilteredMultiSelect； 从“axios”导入axios

class SlideOne extends Component  {

    constructor() {
        super()
        this.state = {
          selectedOptions: [],
        }
      }
    componentDidMount(){
        axios.get("https://api.myjson.com/bins/xcfy7/")
         .then((response)=>{
          this.setState(()=>{
                   return {
                     selectedOptions: response.data.tax
                   }
          })
         })     
    }

    handleDeselect = (deselectedOptions) => {
        var selectedOptions = this.state.selectedOptions.slice()
        deselectedOptions.forEach(option => {
          selectedOptions.splice(selectedOptions.indexOf(option), 1)
        })
        this.setState({selectedOptions})
    }

    handleSelect = (selectedOptions) => {

        selectedOptions.sort((a, b) => a.taxId - b.taxId)
        this.setState({selectedOptions})
    }

    render() {


      return (

          <div className="row">   
           <div className="col-md-6">
            <FilteredMultiSelect
              placeholder="Select from here"
              buttonText="Add"
              classNames={{
                filter: 'form-control',            
                select: 'form-control',
                button: 'btn btn btn-block btn-default',           
                buttonActive: 'btn btn btn-block btn-primary'
              }}
              onChange={this.handleSelect}
              options={this.state.selectedOptions}
              selectedOptions={this.state.selectedOptions}
              textProp="taxName"
              valueProp="taxId"
            />
          </div>      
          <div className="col-md-6">
             <FilteredMultiSelect
              placeholder="get selected here"
              buttonText="delete"
              classNames={{

                filter: 'form-control',            
                select: 'form-control',            
                button: 'btn btn btn-block btn-default',            
                buttonActive: 'btn btn btn-block btn-danger'

              }}

              onChange={this.handleDeselect}
              options={this.state.selectedOptions}
              textProp="taxName"
              valueProp="taxId"
            />


          </div>
        </div>)

    }}

    export default SlideOne;`

类SlideOne扩展组件{
构造函数（）{
超级（）
此.state={
所选选项：[]，
}
}
componentDidMount（）{
axios.get（“https://api.myjson.com/bins/xcfy7/")
。然后（（响应）=>{
此.setState（（）=>{
返回{
选择选项：response.data.tax
}
})
})     
}
handleDeselect=（取消选择）=>{
var selectedOptions=this.state.selectedOptions.slice（）
取消选择。forEach（选项=>{
selectedOptions.splice（selectedOptions.indexOf（选项），1）
})
this.setState（{selectedOptions}）
}
handleSelect=（selectedOptions）=>{
选择选项。排序（（a，b）=>a.taxId-b.taxId）
this.setState（{selectedOptions}）
}
render（）{
返回(
)
}}
导出默认SlideOne`

您可以使用调用远程API和获取数据。确保将数据提取包括在生命周期事件中，并使用提取的数据调用

setState（）

，以更新DOM。

请格式化问题中的代码。感谢您的回答。我在componentDidMount（）中包含了数据，但在获取数据时无法设置state（）。你能解释一下上述情况吗code@Dheeraj能否在componentDidMount（）方法中提供代码？编辑了代码。。请建议一种显示my FilteredMultiselect组件（删除api的表单）中所有选项的方法。对此非常陌生，仍在学习将taxName作为response.data.tax.taxName访问是无效的，因为tax是一个对象数组。