Next.js でlocalstorageをgetしたい

Question

前提・実現したいこと

Next.js でlocalstorageをgetしたいです。
Listコンポーネントにて、localstorageから値を読み取り、表示することができません。（TypeError: Cannot read property 'Lists' of null）
localstorageに、記録することには成功しており以下の形式になっています。

MessageList:[{"Message_id":0,"FromUser":"name","DearUser":"name","Message":"text"},
[{"Message_id":2,"FromUser":"name","DearUser":"HI","Message":"This is for a text area."}]]

以下実装

import Header from '../components/Header'
import New_Message from '../components/New_Message';
import List from '../components/List';
export default () =>
    <div>
        <Header>

        </Header>
        <New_Message initState="HI" />

        <List />

    </div>

import React, { Component } from "react";

var mesid = 1;

var MessageList = [{
    "Message_id": 0,
    "FromUser": "name",
    "DearUser": "name",
    "Message": "text"
}];

var UserList = {
    "User_id": "0",
    "UserName": "name",
    "points": "0",
    "applause":"0"
}

class New_Message extends Component {
    
    constructor(props) {

        super(props);
        this.state = {
            // 初期に表示するもの
            usstate: props.initState,
            desc: 'This is for a text area.',
        };

        this.onSubmit = this.onSubmit.bind(this);
        this.onTextAreaChange = this.onTextAreaChange.bind(this);

    }

    onChange(event) {
        
        console.log(event.target.value);
        this.setState({ usstate: event.target.value });
        
    }

    onSubmit(event) {
        
        mesid++;

        var add_mesData = [{
            "Message_id": 0,
            "FromUser": "name",
            "DearUser": this.state.usstate,
            // "DearUser": "name",
            "Message": this.state.desc
        }];

        add_mesData[0].Message_id = mesid;
        MessageList.push(add_mesData);
        console.log(JSON.stringify(MessageList, null, '\t'));
        localStorage.setItem("MessageList", JSON.stringify(MessageList));

        event.preventDefault();
        console.log("onSubmit");
        console.log(this.state);
        
    }

    onTextAreaChange(e) {
        
        this.setState({ desc: e.target.value });
    }

    render() {

    var states = [
        { code: "CA", name: "California" },
        { code: "HI", name: "Hawaii" },
        { code: "TX", name: "Texas"},
        { code: "WA", name: "Washington" }
    ];
        
    var options = states.map(
        (n)=>(
        <option key={n.code} value={n.code}>
            {n.name}
        </option>
        )
        );
        

    return (
        
        <form onSubmit={this.onSubmit}>

            <div>
                <select
                        value={this.state.usstate}
                        onChange={(event) => {this.onChange(event)} }>
                    {options}
                </select>
            </div>
            
            <textarea
                value={this.state.desc}
                onChange={this.onTextAreaChange} />
            
            <div>
                <button type="submit">OK</button>
            </div>
            
        </form>

    );
    }
}
export default New_Message;

import React, { Component } from "react";
import { loadGetInitialProps } from 'next/dist/next-server/lib/utils';



class List extends Component{

    componentDidUpdate() {
        var MessageList = JSON.parse(localStorage.getItem('MessageList'));
        console.log(MessageList);
        this.state = {
            Lists: MessageList
        };
    }


    render() {

        return (
                <p>
                {this.state.Lists}
                </p>
        );
    }

}
export default List;

発生している問題・エラーメッセージ

TypeError: Cannot read property 'Lists' of null
List.render
./components/List.js:22
  19 |    render() {
  20 | 
  21 |        return (
> 22 |                <p>
     | ^  23 |                {this.state.Lists}
  24 |                </p>
  25 |        );
View compiled

該当のソースコード

import React, { Component } from "react";
import { loadGetInitialProps } from 'next/dist/next-server/lib/utils';



class List extends Component{

    componentDidUpdate() {
        var MessageList = JSON.parse(localStorage.getItem('MessageList'));
        console.log(MessageList);
        this.state = {
            Lists: MessageList
        };
    }


    render() {

        return (
                <p>
                {this.state.Lists}
                </p>
        );
    }

}
export default List;

Answer 1

this.state に代入する形で、stateを変更するのは、constructor だけで許されています。
それ以外（componentDidUpdateメソッドなど）では、this.setState を使います。

componentDidUpdateメソッド の this.state 代入を、以下のようにして試して頂けますでしょうか？

this.setState({
  Lists: MessageList
})

【追記】
componentDidUpdate メソッドで state に設定していますが、
componentDidUpdate メソッドはレンダリング後に呼び出されるので、
レンダリング時には、this.stateの内容は未設定となります。

なので、render メソッドの内容も少し修正が必要です
（最初のレンダリング時に、nullでも動作するようにしないといけない）。

{(this.state.Lists ? this.state.Lists : '')}