Question

我目前正在尝试从API中获取一些JSON数据，并将其放入一个非常简单的React应用程序的下拉列表中。

到目前为止，这是我的DropDown组件：

import React from 'react';

var values;

fetch('http://localhost:8080/values')
    .then(function(res) {
        return res.json();
    }).then(function(json) {
        values = json;
        console.log(values);
    });

class DropDown extends React.Component {
    render(){
        return <div className="drop-down">
            <p>I would like to render a dropdown here from the values object</p>
            </div>;
    }
}

export default DropDown;

任何我的JSON都是这样的：

{  
   "values":[  
      {  
         "id":0,
         "name":"Jeff"
      },
      {  
         "id":1,
         "name":"Joe"
      },
      {  
         "id":2,
         "name":"John"
      },
      {  
         "id":3,
         "name":"Billy"
      },
      {  
         "id":4,
         "name":"Horace"
      },
      {  
         "id":5,
         "name":"Greg"
      }
   ]
}

我希望下拉选项对应于每个元素的'name'，并且'id'在通过选择选项触发事件时用作元素标识符。任何关于将这些数据放入下拉列表以响应用户输入的建议都将非常感激。

Answer 1

你可以这样做：

import React from 'react';

var values;

class DropDown extends React.Component {

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

    componentDidMount(){
        this.fetchOptions()
    }

    fetchOptions(){
        fetch('http://localhost:8080/values')
            .then((res) => {
                return res.json();
            }).then((json) => {
                values = json;
                this.setState({options: values.values})
                console.log(values);
            });
    }
    render(){
        return <div className="drop-down">
            <select>
                { this.state.options.map((option, key) => <option key={key} >{option}</option>) }
            </select>
            </div>;
    }
}

export default DropDown;

基本上，您正在初始化状态并将options设置为null。

然后，当组件安装在浏览器中时，您将获取选项。这些值设置为this.setState()的状态。

注意：在componentDidMount()而非componentWillMount()进行任何API调用非常重要。如果您在componentWillMount()中拨打电话，则会提出两次请求。

然后通过在渲染函数中映射它们来渲染这些选项

Answer 2

在React组件的user生命周期函数中调用API，然后将响应保存在状态中，然后呈现Select下拉列表

componentDidMount

Answer 3

如何在React中将JSON响应呈现为下拉列表。

export default class ExpenseNew extends Component {
    constructor(){
        super();
        this.state={
            PickerSelectedVal : '',
            accountnameMain:[],
        }
    }
     componentDidMount(){
         var account_nam=[]
                fetch('your Url', {
                    method: 'GET',
                    headers: { 'Authorization': 'Bearer ' + your token }
                })
                    .then((response) => response.json())
                    .then((customerselect) => {
                        // alert(JSON.stringify(customerselect)) 
                        global.customerdata = JSON.stringify(customerselect)
                        var customername = JSON.parse(customerdata);
                        //alert(JSON.stringify(customername));
                        for (i = 0; i < customername.cus_data.length; i++) {
                            var dataa = customername.cus_data[i]["account_name"];  
                            account_nam.push(dataa)
                        }
                        this.setState({accountnameMain:account_nam});
                    })
                    .done();
    }
                    render() {
                          return (
                               <Picker
                                selectedValue={this.state.PickerSelectedVal}
                                placeholder="Select your customer"
                                mode="dropdown"
                                iosIcon={<Icon name="arrow-down" />}
                                onValueChange={(itemValue, itemIndex) => this.setState({PickerSelectedVal: itemValue})} >

                                {this.state.accountnameMain.map((item, key)=>(
                                    <Picker.Item label={item} value={item} key={key}/>)
                                )}

                            </Picker>


)
}


}

Answer 4

JSON FILE: terrifcalculatordata.json
[
    {
      "id": 1,
      "name": "Vigo",
    },
    {
      "id": 2,
      "name": "Mercedes",
    },
    {
        "id": 3,
        "name": "Lexus",
      },
      {
        "id": 4,
        "name": "Buggati",
      },
]

CODE: 
1st import json file on top:

import calculatorData from "../static/data/terrifcalculatordata.json";

2nd in render method type this code: 

                      <Form>
                            <FormGroup>
                              <Input
                              type="select"
                              onChange = {this.changeCarmodel}
                              value={this.state.changeCar}
                              >
                              {calculatorData.map((caldata, index) =>
                                <option 
                                key={index}
                                value= {caldata.id}
                                > {caldata.name} </option>
                              )}
                              </Input>
                            </FormGroup>
                         </Form>

如何在React

4 个答案: