Есть ли способ сопоставить значение ответа от API в React с некоторыми заранее определенными значениями, которые затем определят, что отображается?

Я делаю вызов API и возвращаю что-то похожее на это:

{
    "Response": {
        "profile": {
            "data": {
                "userInfo": {
                    "membershipType": 4,
                    "membershipId": "4611686018483730446",
                    "displayName": "DisplayName420"
                },
            },
            "privacy": 1
        }
    },
    "ErrorCode": 1,
    "ThrottleSeconds": 0,
    "ErrorStatus": "Success",
    "Message": "Ok",
    "MessageData": {}
}

Я хочу, чтобы строка, отображаемая в моем DOM, определялась на основе значения ответа API.

Например, поскольку ответ displayName возвращает значение 4, я хочу иметь возможность отображать в DOM строку Battle.Net. Точно так же, если бы значение displayName было 5, я бы хотел, чтобы оно отображало строку Playstation Network.

Это возможно? Я использую React и вызываю API через функцию выборки. Возвращаемые данные представляют собой объект JSON.

Это мой код до сих пор:

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import Auth from './api/Auth'

class APICall extends React.Component {
    state = {
        data: null,
        loading: false
    };

    componentDidMount() {
        var baseURL = 'https://www.bungie.net/Platform';
        var headers = {
            headers: {
                'X-API-KEY': '5e232bf8f19349498081bdec1d9a924b'
            }
        };

        this.setState({loading: true});
        axios.get(baseURL + '/Destiny2/4/Profile/4611686018483730446/?components=100', headers)
            .then(response => this.setState({data: response.data, loading: false}))
    }

    render() {
        const { data } = this.state;
        console.log(data);
        return (
            <div>
                {this.state.loading
                    ? <p className={"text-white"}>"Loading..."</p>
                    :
                    <div>
                        <p className={"text-white"}>{data && data.Response.profile.data.userInfo.membershipType}</p>
                    </div>}
            </div>
        );
    }
}

ReactDOM.render(<APICall />, document.getElementById('root'));
ReactDOM.render(<Auth />, document.getElementById('signin'));

Да, просто создайте себе карту для значений. Или даже простой объектный литерал подойдет.

Keith 22.05.2019 16:06
as the displayName response returns a value of 4 I want to be able to render to the DOM a string of Battle.Net откуда вы знаете, что 4 это Battle.Net ? Вы должны указать это в своем ответе
Vencovsky 22.05.2019 16:06

@Keith, не могли бы вы привести пример того, как это может работать? На данный момент у меня нет опыта работы с React или JS.

AF_web 22.05.2019 16:12

@Vencovsky В данный момент у меня нигде нет этих значений, я просто использую их в качестве примера, я надеялся, что кто-нибудь может указать мне направление записи и привести пример того, как значения должны храниться и т. д.

AF_web 22.05.2019 16:13
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
2
4
167
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, вы можете это сделать. Самый простой способ, вероятно, состоит в том, чтобы иметь объект, который представляет собой таблицу поиска для различных строк, а затем извлекать правильную строку на основе числа. Например:

// somewhere, perhaps at the top of the file (outside the class)
const stringTable = {
  1: 'foo',
  2: 'bar',
  3: 'baz', 
  4: 'Battle.Net',
  5: 'Playstation Network`
}

// later, in render:
<p className={"text-white"}>{data && stringTable[data.Response.profile.data.userInfo.membershipType]}</p>

Другие вопросы по теме