После изменения состояния контент не перерисовывается

Question

Я использую крючки React (новичок в хуках) и сегодня обнаружил ошибку. После изменения состояния содержимое не перерисовывается, как должно. Вот код:

const App = () => {
    const [messeges, UpdataMesseges] = useState([]);


    //here's the code for updating the state, but even after changing the state it's not
    //re-rendering the content on the page.
    const sendMessege = (user, messege) => {
      UpdataMesseges((prevState) => {
        prevState.push({user: user, content: messege});
        console.log(messeges); //here it logs that state is changed (previously)
        return prevState;
      });
    }

    console.log(messeges);

    return (
        <div className="App">
            <Header /> 
            <Chat>
                {
                  messeges.map(obj => <Messege content={obj.content} user="A" key={obj.content} />)
                }
            </Chat>
                {console.log(messeges)} {/*<----- Nothing gets logged even on state change*/}
            <Control>
                <Btn click={() => sendMessege('A', 'blah bla')} >blah</Btn>
            </Control>
        </div>
    );
}

export default App;

Заранее спасибо!

Answer 1

Вы изменяете существующий объект состояния. Вы должны вернуть новый объект массива. Вы можете достичь sh этого, распространив существующее состояние в новый массив и добавив новый объект в конце.

const sendMessege = (user, messege) => {
  UpdataMesseges((prevState) => {
    return [...prevState, { user: user, content: messege }];
  });
}

Если вы хотите регистрировать обновления состояния, используйте эффект с состоянием, которое вы хотите зарегистрировать в массиве зависимостей.

useEffect(() => {
  console.log(messeges);
}, [messeges]);

Answer 2

попробовать

UpdataMesseges((prevState) => { prevState.push({user: user, content: messege}); return {...prevState}; // << chage this line on sendMessege method });