Вывод сообщения по ключу. Ничего не отражает

Question

Если смотреть логи, то кода мы передаем Key, то запрос все таки уходит и возвращает Json. Но сам код ничего не выводит на экран. В чем проблема?

import React, { FC, ReactElement, useRef, useEffect, useState } from 'react';
import { Client, MessageLookupDto } from '../api/api';
import { FormControl } from 'react-bootstrap';

const apiClient = new Client('https://localhost:44356');

const MessageList: FC<{}> = (): ReactElement => {
    let textInput = useRef(null);
    const [messages, setMessages] = useState<MessageLookupDto[] | undefined>(undefined);
    let messageKey = 'c174340f-3ebb-44e2-82f5-40eb8fa5a4e0'

    async function getMessages() {
        const messageListVm = await apiClient.get(messageKey, '1.0');
        setMessages(messageListVm.messages);
    }

    useEffect(() => {
        setTimeout(getMessages, 500);
    }, []);
    

    const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
        if (event.key === 'Enter') {
            messageKey = event.currentTarget.value.toString();
            getMessages()
            event.currentTarget.value = '';
            setTimeout(getMessages, 500);
        }
    };

    return (
        <div>
            Messages
            <div>
                <br/>
                <div>Enter the key</div>
                <FormControl ref={textInput} onKeyPress={handleKeyPress} />
            </div>
            <section className='mainsec'>
            <br/>
                {messages?.map((message) => (
                    <div>
                        <div>Title: {message.title}</div>
                        <div>Text: {message.text}</div>
                        <div>View key: {message.uploadUrl?.slice(-36)}</div>
                        <br/>
                    </div>
                ))}
            </section>
        </div>
    );
};

export default MessageList;

Answer 1

Ваша функция получения сообщения должна выглядеть вот так:

async function getMessages() {
    const messageListVm = await apiClient.get(messageKey, '1.0');
    setMessages([ messageListVm ]);
}

Можно сократить

async function getMessages() {
    setMessages([ await apiClient.get(messageKey, '1.0') ]);
}

Ваш apiClient.get возвращает объект(object), в котором нет ключа messages.

При этом же, ответ и есть нужный вам элемент.

Для того, что бы методе render был данный элемент отрисован корректно и не надо было переписывать компонент, то полученный ответ положим в массив и сохраним в messages. Теперь в render messages?.map() отработает и отобразит 1 элемент

БЛОГ НА HUSL

Вывод сообщения по ключу. Ничего не отражает

Ответы (1 шт):