javascript - TypeError : this. state.posts.map 在将状态设置为数组时不是函数

Question

为我的 posts:[] 对象映射状态时出现以下错误

TypeError: this.state.posts.map is not a function

我看了一些东西similar但它并没有接近解决问题。

console.log() 显示当前数据，因此该函数有效，只需在 posts:[] 对象中传递数据并映射它即可。

{this.state.posts.map((post, key)=> {
    return(
        <div key={key}>
            <h2>{post.description}</h2>

            <small>{post.username}</small>

        </div>
    ); 
})}

Dashboard.js(已更新)

class Dashboard extends Component{

    constructor(props){
        super(props)

        this.state = {
            username:"",
            loading: true,
            posts:{},
            myArray:[]
        }

    }
    componentWillMount(){
        this.getPosts()
    }

    getPosts() {
        const collection2 = fire.collection('posts');
        collection2.get().then(snapshot => {
            snapshot.forEach(doc => { 
                let items = doc.data();
                // items = JSON.stringify(items);
                this.setState({
                  posts: items
                });
            })    
        const eArray = Object.values(this.state.posts);
        this.setState({
            myArray:[...eArray]
        })

        console.log(this.state.myArray)
        })


    }


    componentDidMount(){
        if(this.props.userId){
            const collection = fire.collection('users');
            collection.get().then(snapshot => {     
              snapshot.forEach(doc => { 
                this.setState({
                    username: doc.data().username,
                    loading:false
                })                 
              });   
            });

        }

    }

    render(){
        if (!this.props.userId) return <Redirect to='/' />
        const { loading, posts,myArray } = this.state;

        if(loading){
           return(
            <div className="loader"></div>
           ) 
        }
        return(
            <div className="container"> 
                <div className="row">
                    <div className="col-md-6 mt-3">
                        <h1>Welcome {this.state.username.toLowerCase()}</h1>

                        {myArray.map((post, key)=> {
                            return(
                                <div key={key}>
                                    <h2>{post.description}</h2>

                                    <small>{post.username}</small>


                                </div>
                            ); 
                        })}
                    </div>
                </div>
            </div>


        );
    }


}

Answer 1

您在控制台中遇到的错误是因为您在对象上使用 .map，但 map 是 Array 的一种方法。 More info on .map

您的代码还有另一个问题，您不应该在循环内调用 this.setState。相反，从循环中收集您需要的数据，然后更新 state。

像这样

      getPosts() {
        const collection2 = fire.collection('posts');
        collection2.get().then(snapshot => {
            let arr = [];
            snapshot.forEach(doc => { 
              arr.push(doc.data()); //Collect all the items and push it into the array
            })
            this.setState({
              posts: arr,
            })
        })
    }

我不知道你到底想在 componentDidMount 上做什么。但这应该为您指明正确的方向并解决您遇到的 map 不是函数的错误。