Неправильно удаляются елементы React

Question

const { useState } = React;

function App() {
  let names = ["1", "2", "3", "4", "5"];
  let [list, setList] = useState(names)

  function handleAdd() {
    setList((v) => [...v, 'value'])
    console.log(list)
  }

  function handleDelete() {
    setList((v) => [v.pop(), ...v])
    console.log(list)
  }

  return (
    <div>
      <ul>
        {list.map((item, index) => {
          if(item !== undefined){
            return <li key={index}>{item}</li>;
          }
          else {

          }
        })}
      </ul>
      <button onClick={handleAdd}>Add</button>
      <button onClick={handleDelete}>Delete</button>
    </div>
  );
}

 ReactDOM.render(
     <App />,
     document.body
 )

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
 <div id="react"></div>

Код должен при клике на delete удалять последний li. Он какбы и делает это, но зачем-то перемешивает массив. Как быть?

Answer 1

метод .pop - возвращает удаленный элемент.

Таким образов ты его удаляешь из старого массива и вставляешь в начало нового.

Вместо этого можно было воспользоваться функцией .slice

Пример:

const {
  useState
} = React;

function App() {
  let names = ["1", "2", "3", "4", "5"];
  let [list, setList] = useState(names)

  function handleAdd() {
    setList((v) => [...v, 'value'])
    console.log(list)
  }

  function handleDelete() {
    setList((v) => v.slice(0, -1))
    console.log(list)
  }

  return ( <
    div >
    <
    ul > {
      list.map((item, index) => {
        if (item !== undefined) {
          return <li key = {
            index
          } > {
            item
          } < /li>;
        } else {

        }
      })
    } <
    /ul> <
    button onClick = {
      handleAdd
    } > Add < /button> <
    button onClick = {
      handleDelete
    } > Delete < /button> < /
    div >
  );
}

ReactDOM.render( <
  App / > ,
  document.getElementById("react")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
<div id="react"></div>

БЛОГ НА HUSL

Неправильно удаляются елементы React

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