Как можно пофиксить этот баг с выводом массива?

Question

[Дмитрий Путилов]

Всем привет, возникла проблема, есть код, там есть хук useState, при клике я в состояние добавляю новый объект, вывожу его через console.log, но в консоле логе показывает что он добавился и все норм, а страница как будто не ререндерится, то есть остается старый вывод, а новый не добавляется, хотя в логе показывает, что массив заполнился, в чем может быть проблема?

import {useState} from "react";

function App() {

    const users = [
        {id: 1, title: 'Dima'},
        {id: 2, title: 'Oleg'},
    ]

    const [user, setUser] = useState(users)

    const addUser = (name) => {
        let copy = Object.assign(user)
        copy.push({id: 3, title: name})
        setUser(copy)
        console.log(user)
    }

    const usersList = () => {
        return user.map(user => <div>{user.title}</div>)
    }

  return (
    <div className="App">
        <button onClick={() => addUser(prompt())}>Click me!</button>
        <br/>
        {usersList()}
    </div>
  );
}

export default App;

Answer 1

[Dosya]

Попробуй это

import {useState} from "react";

function App() {

    const users = [
        {id: 1, title: 'Dima'},
        {id: 2, title: 'Oleg'},
    ]

    const [user, setUser] = useState(users)

    const addUser = () => {
        const name =  prompt()
        setUser({...users,  id: Date.now(), title: name})
    }

    const usersList = () => {
        return user.map(user => <div>{user.title}</div>)
    }

  return (
    <div className="App">
        <button onClick={addUser}>Click me!</button>
        <br/>
        {usersList()}
    </div>
  );
}

export default App;

<button onClick={() => addUser(prompt())}>Click me!</button>

Вот здесь не надо создовать анонимную функцию и через параментр передать данные из prompt, лучше prompt написать внутри функции

Comments

[Дмитрий Путилов]

Попробовал, при добавлении нового элемента выдает вот такие вот ошибки

[Dosya]

извини я неправильно написал, вот правильный

const addUser = () => {
        const name =  prompt()
        setUser([...users,  {id: Date.now(), title: name}])
    }

[Дмитрий Путилов]

Dosya, спасибо большое