Почему возникает ошибка Cannot read property 'map' of undefined?

Question

[zerabora]

Код рендерит список с кнопкой удаления, инпут и кнопку.
По нажатию на кнопку "Х" вызывается функция deleteLi, которая должна удалить элемент списка. Но выходит ошибка:

TypeError: Cannot read property 'map' of undefined

import React, { useState } from 'react';

const  Task = () => {
    const [users, setUsers] = useState({user:['user1', 'user2', 'user3']});
    const [li, setLi] = useState('');

    const deleteLi = (index) => {
        setUsers(users.user.filter((item,i) => i !== index));
    };

    const list = users.user.map((item, index)=>(
        <li key={index}>
            {item}
            <button onClick = {()=>deleteLi(index)}> Х </button>
        </li>
    ));
    
    const handleChange = (e) => setLi(e.target.value);
    const handleClick = () => setUsers({user:[...users.user, li]});
    
    return <div>
        <ul>{list}</ul>
        <input type="text" onChange = {handleChange}/>
        <input type="submit" onClick = {handleClick}/>
    </div>
};

export default Task;

В чем причина ошибки и как можно пофиксить?

Answer 1

[0xD34F]

const [users, setUsers] = useState({user:['user1', 'user2', 'user3']});

Здесь users это объект, единственное свойство которого является массивом.

setUsers(users.user.filter((item,i) => i !== index));

А здесь - массив.

const list = users.user.map(...

У этого массива вы пытаетесь прочитать свойство user, которого нет, получаете undefined, а дальше... Ну, сообщение об ошибке вы уже видели.

Вы бы определились, чем должен быть users.