问Data.map(项=>{...})返回以下错误

EN

import React, { useState, useEffect } from 'react';

const Home = () => {

    const [data, setData] = useState("")
    useEffect(() => {

        fetch('/allpost', {
            headers: {
                "Authorization": "Bearer" + localStorage.getItem("jwt")
            }
        }).then(res => res.json())
            .then(result => {
                console.log(result)
                setData(result.posts)
            })

    }, [])

    return (
        <div className="home">

            {
                data.map(item => {

                    return (

                        <div className="card home-card">
                            <h5>Maninder</h5>
                            <div className="card-image">
                                <img src="https://images.unsplash.com/photo-1468971050039-be99497410af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
                                <div className="card-content">
                                    <i className="material-icons" style={{ color: "Red" }}>favorite</i>
                                    <h6>Title</h6>
                                    <p>This is amazing post.</p>

                                    <input type="text" placeholder="add a comment" />
                                </div>
                            </div>
                        </div>

                    )
                })
            }
        </div>

    )

}
export default Home