Array.concat () возвращает пустой массив

Question

Я создаю веб-приложение, используя React 16.10, и когда я пытаюсь добавить элемент в пустой массив, используя Array.concat(), сначала он возвращает пустой массив, а после второй попытки он возвращает расширенный массив.

Причины, по которым я не использую Array.push():

• , он возвращает длину расширенного массива
• "Никогда не изменяйте this.state напрямую, так каквызов метода setState () впоследствии может заменить созданную вами мутацию. Рассматривать this.state так, как если бы он был неизменным. "

Вот код:

const [pizzas, setPizzas]= useState([]);

const addPizza = (type, size, dough, price) => {
    setPizzas(pizzas.concat([{type, size, dough, price}]));
    console.log(pizzas);
}

Функция addPizza срабатывает при нажатии кнопки. Когда я щелкаю по нему в первый раз, консоль возвращает [], но когда я щелкаю по нему во второй раз, она возвращает расширенный массив: [{...}].

Странно то, что когда я пытаюсь сделать что-то подобноев консоли браузера работает правильно:

const a = [];

a.concat({name: 'James'}); // returns [{name: 'James'}]

Answer 1

.concat() не изменяет Array;он возвращает новый массив, содержащий конкатенацию. Таким образом, эта строка устанавливает pizzas state при следующем рендеринге в массив с новым элементом:

setPizzas(pizzas.concat([{type, size, dough, price}]));

... потому что она как бы переводит в это:

const newPizzas = pizzas.concat([{type, size, dough, price}]);
setPizzas(newPizzas);

... но локальная переменная pizzas, которую вы регистрируете, не изменяется. Однако при следующем вызове useState новое значение будет иметь pizzas.

Answer 2

состояние установки в React является асинхронным. Когда вы вызываете сеттер, полученный из useState, у вас есть гарантия, что в будущем функция будет вызываться с новым обновленным состоянием.

Она не обновляет существующую ссылку (на pizzas) - скорее, она вызывает функцию с новой.

Вот как работает состояние в реакции - предположительно, чтобы создать видимость неизменности внутри рендера.