更改状态后，内容不会重新渲染答案

【问题标题】：After changing state, content is not rerendering更改状态后，内容不会重新渲染
【发布时间】：2020-05-06 05:42:25
【问题描述】：

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

提前致谢！

【问题讨论】：

标签： reactjs react-hooks state

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

试试

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

【讨论】：