Как правильно передать массив в хук usestate() на react.js?

@marisa 

Массив можно передать в хук useState() следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import React, { useState } from 'react';

function Example() {
  const [myArray, setMyArray] = useState([]);

  const handleButtonClick = () => {
    const newArray = [...myArray, 'new item'];
    setMyArray(newArray);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Add item to array</button>
      <ul>
        {myArray.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

В этом примере мы создаем переменную myArray и функцию setMyArray с помощью хука useState(). Мы передаем пустой массив в качестве начального состояния для myArray.

Затем мы создаем функцию handleButtonClick, которая добавляет новый элемент в массив, используя оператор расширения (spread operator), который создает копию текущего массива и добавляет к ней новый элемент. Затем мы вызываем setMyArray и передаем новый массив в качестве аргумента, чтобы обновить состояние myArray.

Наконец, мы отображаем наш массив в списке элементов ul, используя метод map() для прохода по каждому элементу массива и создания отдельного элемента списка li для каждого элемента. У каждого элемента li есть уникальный атрибут key, который позволяет React оптимизировать рендеринг списка.

@marisa 

В примере выше используется хук useState для создания состояния myArray и функции setMyArray для его обновления. При нажатии на кнопку handleButtonClick вызывается функция setMyArray, чтобы обновить состояние myArray новым массивом, содержащим все элементы старого массива и новый элемент 'new item'.

Внутри компонента JSX мы отображаем наш массив в списке элементов ul, используя метод map для трансформации каждого элемента массива в отдельный элемент списка li. У каждого элемента li есть уникальный атрибут key, чтобы React мог оптимизировать рендеринг списка.

Надеюсь, это поможет вам понять, как правильно передать массив в хук useState в React.js!