Как отрендерить элемент?

Question

[dotnetlooper]

Самая простая задача, которая может быть: с бекенда приходит массив объектов нужно их отренделить.
[{}, .... {}]

async function fetchData() {
        try {
            const result = await axios
                .get("http://localhost:8000/directories");
        
            console.log(result.data);
            
            setDirectories(result.data);
        }
        catch(error) {
            console.error(error);
        }
    }

{
                    directories && directories.map((directory, index) => {
                        <Directory
                            key={ index }
                            label={ directory.name }
                        />
                    })
                }

Мне приходят данные(как минимум вижу в консоле), но как мне пройтись по каждому объекту и его аттрибуту и отрендерить? Что я упускаю?

Comments

[WbICHA]

return

[Владимир]

кроме того, в документации черным по белому пишут, что индекс нельзя использовать в качестве ключа, у вас id вполне себе уникальный есть.

[WbICHA]

Владимир, не "нельзя", а нежелательно.) В данном случае да, это ошибка. Хотя не факт, что имя обязано быть уникальным.

[dotnetlooper]

WbICHA, Владимир, спасибо! х2

Answer 1

[shsv382]

Во-первых, не надо делать key={ index }, если данные на сервере обновятся, будет проблема обновить их на фронте.
Во-вторых, приведи, пожалуйста, код функции setDirectories()

Comments

[dotnetlooper]

Понял, спасибо за index, учту.
А по поводу setDirectories - это хук.
const [directories, setDirectories] = useState(null);