Правильно ли я сделал иммутабельность в React?

Question

[rabobas]

при нажатии на кнопку в список должен добавляться новый элемент li который сначала должен появиться в массиве
вот реакт компонент:

function ImmutabelArr() {
    let [notes,setNotes] = useState([1,2,3,4,5])

    let result = notes.map((note,index) => {
        return <li key={index}>{note}</li>
    })
    function addLi(notes) {
        let copy = [...notes,notes.length+1]
        setNotes(copy)
    }
    	return <div>
            <ul>
                {result}
            </ul>
            <button onClick={()=>addLi(notes)}>add li</button>
	          </div>;     
}

Answer 1

[Mikhail Osher]

В целом - да. Конструкция [...someArray, newElement] создает новый массив, включает туда все элементы из someArray, и добавляет newElement в конец нового массива.

Однако, оффтоп заметка: конкретно в данном случае с такой простой логикой (выведение последовательных чисел), список, кажется, излишен. Можно просто хранить цифру-количество элементов и от них плясать через index+1.

Есть нюанс. Вы используете потенциально устаревшие данные. Советую переписать на вот такой вариант:

function ImmutabelArr() {
    let [notes,setNotes] = useState([1,2,3,4,5])

    let result = notes.map((note,index) => {
        return <li key={index}>{note}</li>
    })
    function addLi() {
        setNotes(prevNotes => [...prevNotes, prevNotes.length + 1])
    }
    	return <div>
            <ul>
                {result}
            </ul>
            <button onClick={addLi}>add li</button>
	          </div>;     
}

Comments

[Kentavr16]

А по иммутабельности-то что?)