如何使用选项标签在json响应中进行映射？

Question

我是React的初学者，我正在尝试在下拉列表中输出json响应。我的回复看起来像这样

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {author: {…}, template_content: {…}, template_id: "9d288846-3418-4086-a15b-a2c00a823416", template_name: "name"}
1: {author: {…}, template_content: {…}, template_id: "d4646d5d-41df-4540-9a4f-bdc50bfa9fa1", template_name: "name"}
2: {author: {…}, template_content: {…}, template_id: "fe74ada6-e28c-433e-a0b1-fddfa20aaa18", template_name: "name"}
3: {author: {…}, template_content: {…}, template_id: "3f5deba5-532e-4043-a694-30a6b5fc3b1a", template_name: "hello name"}
4: {author: {…}, template_content: {…}, template_id: "73d6ecc4-338d-4603-9c68-470f0183704e", template_name: "hello"}
5: {author: {…}, template_content: {…}, template_id: "6142f855-9770-4889-9f37-cc1cacaca0db", template_name: "nhnhgngx"}

我想让template_id在下拉值中显示。到目前为止，我正在使用map函数来执行此操作，但是我遇到了Type错误。谷歌搜索后，但我意识到map是数组的功能，所以它不起作用。但是我无法找到一种解决方法。这是我的代码如下：

static getTemplates = (callback) => {
    const url = API_BASE_URL + TEMPLATE_CREATE
    let apiResponse = { response: null, error: false, msg: '' };

    axios({
        method: 'GET',
        url: url,
        headers: {
            'Authorization': getAccessToken()
        },
        responseType: 'json',
        responseEncoding: 'utf8'
    })
        .then(response => {
            apiResponse.response = response;
        })
        .catch(error => {
            apiResponse.response = error;
            apiResponse.error = true;
        })
        .finally(() => {
            callback(apiResponse);
        });
};

getTemplatesApiResponse = apiResponse => {
    const statusCode = apiResponse.response.status;
    if (statusCode === 200) {
        this.setState({ templates: apiResponse.response.data.result });
    } else {
        this.setState({ error: true, errorMessage: '' });
        this.openNotificationWithIcon('error', 'No Templates found', apiResponse.response.data.error.msg);
    }
};
GetTemplates = (e) =>{
            XRayApi.getTemplates(this.getTemplatesApiResponse)
        }
                        <Select
                        native
                        label="Select-Template"
                        onClick={this.GetTemplates} 
                        >
                        <option aria-label="None" value="" />
                         {
                            templates.map(x=> <option>{x}</option>)
                        } 
                        </Select>

它给我以下错误：

TypeError：templates.map不是函数

截屏：

如何解决？请帮忙！

Answer 1

您可以在x.template_id标签之间添加value属性的<option>。

因此从技术上讲.map()遍历数组，您将从API调用中获得什么，.map()代表当前元素。当前元素具有属性x，在两种情况下都可以使用。

您看到的错误与在template_id值上调用.map()有关。可能您可以为null添加一个额外的null检查，因为它是从API异步发出的，所以添加templates将对我的示例所示有所帮助。

我会尝试添加以下内容：

templates && templates.map()

我希望这会有所帮助！