Не перерисовывается компонент React

Question

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 кол-вом елементов, но почему-то нету ни ошибки ни норм результата. Чо так?

Answer 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>

Answer 2

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

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>
  );
}

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

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

БЛОГ НА HUSL

Не перерисовывается компонент React

Ответы (2 шт):