Как отобразить ответ 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 отображалось в раскрывающихся значениях. Пока я использую для этого функцию карты, но столкнулся с ошибкой типа. После поиска в Google я понял, что карта - это функция массивов, поэтому она не будет работать. Но я не могу найти обходной путь, как это сделать. Вот мой код ниже:

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, x представляет текущий элемент. Текущий элемент имеет свойство template_id, которое вы можете использовать в обоих случаях.

Ошибка, которую вы видите, связана с вызовом .map() на null значении. Вероятно, вы можете добавить дополнительную проверку null для templates, потому что он поступает асинхронно из API, поэтому добавление templates && templates.map() поможет, как я показал в моем примере.

Я бы попытался добавить в качестве следующее - обратите внимание, что я добавил this.state перед templates:

<Select native label="Select-Template" onClick={this.GetTemplates} >
    <option aria-label="None" value="" />
    {
       this.state.templates &&
       this.state.templates.map(x=> <option value={x.template_id}>{x.template_id}</option>)
    } 
</Select>

Надеюсь, это поможет!