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

我目前正在尝试获取从 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"
      }
   ]
}

我希望下拉选项对应于每个元素的“名称”，并且当通过选择选项触发事件时将“id”用作元素标识符。任何有关将此数据放入响应用户输入的下拉列表中的建议将不胜感激。

你可以这样做：

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为空。

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

注意：在以下位置进行任何 API 调用非常重要componentDidMount()并不是componentWillMount()。如果你调用它componentWillMount()该请求将提出两次。

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