Как работает этот код?

Question

[rd100]

Есть код, который я подсмотрел в одном из файлов nextjs

export default function Index() {
  const { data, error } = useSWR('{ users { name } }', fetcher)

  const { users } = data

  return (
    <div>
      {users.map((user, i) => (
        <div key={i}>{user.name}</div>
      ))}
    </div>
  )
}

Что означает эта запись?
Читал про деструктивное присвоение, но там были значения в массиве, а тут в объекте.
Было бы логично предположить, что созданы 2 объекта, но зачем им присваивать одинаковые значения.

const { data, error } = useSWR('{ users { name } }', fetcher)

Зачем нуна именно такая запись, почему нельзя присвоить просто users = data
const { users } = data

Есть такой рендер, но почему здесь используется map? А точнее, как?
map у нас возвращает новый массив, но как мы здесь добавим что-то в блоки, если мы на месте получаем новый массив users и все. Зачем нам его здесь засовывать в div, как он вернет туда какие-то значения?
Вроде логично, что мы сразу должны получить массив данных, а уже после с ним что-то делать, а тут мы его просто получаем и все.

return (
    <div>
      {users.map((user, i) => (
        <div key={i}>{user.name}</div>
      ))}
    </div>
  )

Answer 1

[Rsa97]

Читал про деструктивное присвоение, но там были значения в массиве, а тут в объекте.

https://developer.mozilla.org/en-US/docs/Web/JavaS...

Вроде логично, что мы сразу должны получить массив данных, а уже после с ним что-то делать, а тут мы его просто получаем и все.

https://medium.com/byte-sized-react/component-arra...

Comments

[rd100]

Зачем такая запись, в чём ее смысл?
const { users } = data

Единственный пример с вашей ссылки, который не особо описывается.
Я не совсем понял, что здесь происходит.
Это эквивалентные записи?

var o = {p: 42, q: true};
var {p, q} = o;

И что бы работало var {p, q} = o;, нам нужно перед этим создать

var p = 42;
var q = true;

Так? И выйдет, что у объекта о будут два ключа, которые будут называться именем переменных и их значения, их значения, верно?

Я просто эту запись, даже с такой логикой, вообще не пойму, что тут происходит.

const { data, error } = useSWR('{ users { name } }', fetcher)

Т.е. это работает только в реакте, а в нативном js подобное не прокатит?

return (
    <div>
      {users.map((user, i) => (
        <div key={i}>{user.name}</div>
      ))}
    </div>
  )

[Чипекве]

const { users } = data тоже самое, что и const users = data.users

const { data, error } = useSWR('{ users { name } }', fetcher)

Здесь функция useSWR() возвращает объект. Из этого объекта достаются переменные data и error. Примерно тоже самое, что и:

const myObject = useSWR('{ users { name } }', fetcher);
const data = myObject.data;
const error = myObject.error;

Т.е. это работает только в реакте, а в нативном js подобное не прокатит?

В нативном тоже можно. Только надо помнить, что map() возвращает массив. Поэтому его надо привести к строке через join() и вставлять эту строку как HTML в нужном месте.

[rd100]

Чипекве, спасибо!