Question

我正在创建一个instagrame克隆页面的一个项目。我们提供了一个数组，其中包含创建Instagram帖子所需的数据。

我正在尝试在我们的数据数组中呈现一个称为注释的数组。
有3个帖子，带有3组不同的注释，它们对应在一起。

由于某种原因，我只能在我的所有三篇帖子上呈现一组评论。
有人可以帮助我吗？我在codeandbox上有我的代码：

    import React, { Component } from 'react';
    import './App.css';
    import dummyData   from "./dummy-data";
    import SearchbarContainer from "./components/SearchBar/SearchbarContainer";
    import Post from "./components/Posts/Post/Post";




    class App extends Component {
      constructor(){
        super();
        this.state = {
          data: dummyData,
          comments: dummyData.map(instence =>{
            return(
              instence.comments
            )
          })
        };
    }

    arrayloop(i){

    }

      render() {
        return (


          <div className="App">
            <SearchbarContainer />

            <Post data={this.state.data} comments={this.state.comments}/>

          </div>
        );
      }
    }

    export default App;
--------------------------------------------------------------------------

    import React from 'react';
    import '../post.css';

    const PostComments = props => {
        return(
            <div className={"commentBox"}>
            <>
            <div className={"commentUser"}>{props.postcommentsusers.username}</div>
            </>
            <>
            {props.postcomments.text}
            </>
            </div>
        )
    }

    export default PostComments

------------------------------------------------------------------
    import React from 'react';
    import './postcontainer.css';
    import PostUser from '../PostHeader/PostUser';
    import PostImg from '../PostBody/PostImg';
    import PostComments from '../PostComments/PostComments';
    import PostActions from '../PostBody/PostActions';
    import PostLikes from '../PostBody/PostLikes';
    import PostCommentForm from '../PostComments/PostCommentForm';
    import PostTimeStamps from '../PostBody/PostTimeStamps';

    const Post = props => {
        return(
            <div>
            {props.data.map(data => {
                return(
                    <div className={'containerPost'}>
                    <>
                        <PostUser usernames={data} usericons={data} />
                        <PostImg postimg={data} />
                        <PostActions />
                        <PostLikes postlikes={data}/>   

                    </>

                    <>
                    {props.comments.map(commentdata => {
                        return(
                            <>
                                <PostComments postcomments={commentdata}                             postcommentsusers={commentdata} />

                            </>
                        )
                        })}
                        <PostTimeStamps posttime={data} />
                        <PostCommentForm />      
                    </>
            </div>

                )
            })};


            </div>
        )
    }

    export default Post

提前谢谢！

数组渲染组件中的React Array无法正常运行

0 个答案: