0

import React, { useState } from "react";
import "./App.css";

function App() {
  let names = ["Коля", "Вася", "Петя", "Иван", "Дима"];
  let [count, setState] = useState(0)
  let arr = []

  function handleClick() {
    setState(count + 1)
    arr = Array(count).fill('punkt')
  }

  return (
    <div>
      <ul>
        {names.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
        {arr.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
      </ul>
      <button onClick={handleClick}>Add</button>
    </div>
  );
}

export default App;

Задача: Вывести список имён и по нажатии на кнопку, добавлять li в конец списка. Возможно у меня странный подход, я для каждого нажатия кнопки прибавляю к count единицу и создаю массив с count кол-вом елементов, но почему-то нету ни ошибки ни норм результата. Чо так?

2 ответа 2

1

Вот, если правильно вас понял, для перерисовки лучше использовать callback в useState

import React, { useState } from 'react';

import "./App.css";

function App() {
  let initialState = ['Коля', 'Вася', 'Петя', 'Иван', 'Дима'];
  let [name, setName] = useState(initialState);

  function handleClick() {
    setName((v) => [...v, 'value']);
  }

  return (
    <div>
      <ul>
        {name.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
      <button onClick={handleClick}>Add</button>
    </div>
  );
}

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

2
  • function handleClick() { setName((v) => [...v, 'value']); } как здесь работает троеточие и что вообще эта строка делает?
    – maks
    9 июн 2022 в 21:24
  • @maks троеточие это деструктуризация, если в кратце, мы берём старое значение => развёртываем в новый массив => добавляем в конец нового массива новое значени => благодаря колбеку перерисовываем компоненту
    – Krovorgen
    10 июн 2022 в 18:01
0

Вы должны изменять отслеживаемую переменную. У вас же попытка вывести, не имеющие отношения к состоянию списки

function App() {
  let names = ["Коля", "Вася", "Петя", "Иван", "Дима"];
  let [namesList, setNames] = useState(names)

  function handleClick() {
    namesList.push('new name');
    setNames(namesList)
  }

  return (
    <div>
      <ul>
        {namesList.map((item, index) => {
          return <li key={index}>{item}</li>;
        })}
      </ul>
      <button onClick={handleClick}>Add</button>
    </div>
  );
}

Написал по памяти, не проверял работоспособность

Использование хука состояния

1
  • Ошибок нету, но и ваш код не работает. Я сделал по Вашему образцу(думал я натупил), потом закопипастил и всеравно ничего.
    – maks
    9 июн 2022 в 21:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.