Question

我正在尝试制作一个页面，用以下代码呈现我在mongodb服务器上拥有的所有帖子：

constructor(props) {
        super(props);
        this.state = {
            posts: []
        }
        this.listPosts = this.listPosts.bind(this);
    }
componentDidMount() {
        showAllPosts().then(res => {
            console.log(res)
            this.setState({
                posts: res
            })
        })
        console.log(this.state)
}
    listPosts() {
        this.state.posts.map(post =>
            <listPost data={post}/>)
    }
render() {
        return (
            <div>
                <h1> All Posts </h1>
                <ul class="mad-list">
                    {this.listPosts}
                </ul>
            </div>
        )
    }

如您所见，我在console.log（）设置状态之后并在函数外部，但是第二个console.log显示了一个空数组，因此我确定我的方式有问题我以此设置状态。我读到您应该在名为that或self的函数之外创建一个变量，并将其设置为this并将其用于.setState函数，但是我尝试了一下，但仍然无法正常工作。我很确定没有帖子会阻止listPosts函数正常工作。

Answer 1

我认为更好的方法可能是

render() {
 const {posts} = this.state;
 let listPosts = (
  posts.map(post => <listPost data={post}/>)
 );
 return (
  <div>
   <h1> All Posts </h1>
   <ul class="mad-list">
    {listPosts}
   </ul>
  </div>
 )
}

我将解释我在这里所做的事情。因此，在 const {posts} 行上，我从您的状态中提取了帖子，并将其存储在变量中。

此外，我将地图保存在一个可以直接在JSX代码中使用的变量中。

我调用了在JSX中创建的变量以呈现内容。

通过这种方式，不再需要功能 listPosts ，除非除了循环显示结果之外还要做其他事情

试图弄清楚为什么代码无法呈现列表

1 个答案: