时间戳

首页 > 解决方案 > 更改状态后，内容不会重新渲染

reactjs - 更改状态后，内容不会重新渲染

问题描述

我正在使用 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;

提前致谢！

标签： reactjsreact-hooksstate

解决方案

您正在改变现有的状态对象。您必须返回新的数组对象。您可以通过将现有状态扩展到新数组并在末尾附加新对象来完成此操作。

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

如果要记录状态更新，请使用要在依赖项数组中记录的状态的效果。

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

推荐阅读