Redisから取得した情報をReact.jsで上手く表示できない

Question

環境

Laravel5.8(APIとして)
React.js 16.8.6
Redis (AWS ElastiCache)

実現したいこと

ECサイトで買い物かご情報のSessionでRedisを使用している。
買い物かごの商品ごとの情報を表示させたい

現状

▼Laravelで下記の様にsession情報を取得し、Reactに渡す。

$cart = Redis::command('GET', ['cart']);

▼chrome側でconsole.logし取得したデータは以下の通り
(*json_encodeで受け取っているが、配列では無いのはなぜ。。。？)

class Cart extends React.Component<'', State> {
    constructor(props: any) {
        super(props);
        this.state = { cart: [] };
    }

    async componentDidMount() {
        const cart = await apiConnect('/api/hoge', 'POST');//情報を取ってくる
        console.log(cart); //**画像のconsole.log
        this.setState({ cart }); 
    }

    render() {
        return (
            <div className="Cart">
                <h2>個数 : {this.state.cart.totalQty}</h2> //**これは表示される
                <ul>
                    {this.state.cart.items.map(cart => (//**ここでエラー
                        <li>
                            {cart.price}
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

上記のコードの場合「Cannot read property 'map' of undefined」のエラー。

① Redisへのデータの入れ方が良くないのか
② js側でどうすればitemsの表示が可能なのか
のご回答宜しくお願い致します。

ps. laravel側でRedisにどうデータを保存しているかなど、ご希望有りましたら追記いたします。
追記

js側にて下記の様に書くと

{this.state.cart.items}

▼のエラー(json_decode()して取得しているが、なぞobjectのままなのか。。？)

Objects are not valid as a React child (found: object with keys {3, 9}). If you meant to render a collection of children, use an array instead.

Answer 1

itemsをobjectから配列に変更することで対応致しました。

var items: any[] = [];
for(let k of Object.keys(cart.items)) {
    items.push(cart.items[k]);
}

this.setState({ cart,items });

Answer 2

componentDidMount が実行される前に render が実行されるタイミングがあります。
このとき cart.items は [].items となり undefined となります。

state の初期値を {cart: {items: []}} とすると解決するはずです。

Comments

[kazoogon]

ご回答ありがとうございます。
「TypeError: this.state.cart.items.map is not a function」のエラーが出ますね。。

[set0gut1]

あ、これ componentDidMount 中で api から取ってきた cart.items って配列じゃなくてオブジェクトっぽいですね。
componentDidMount 中で cart.items を配列に整形する必要があるかと思いました。
（それか cart.items は配列じゃなくてオブジェクトだっていうことに変更するか）

[kazoogon]

laravel側でjson_encodeしてreact側に渡す
↓
react側でJSON.parse(data)すると「Unexpected token s in JSON at position 0」のエラー

Redisにjson形式で値の入っている場合はどう取り出して、jsに表示させるのが基本なのか知れたらベストですね。。