Question

是他们调用此函数的另一种方法。我不确定这是什么样的功能。希望有人可以填补我的空白。我所知道的全部功能。

{this.getLikes(post.Likes)}

不带

最大更新深度超出错误

 getLikes = (count) =>  {
        const myLikes = count.forEach( (like) => like.length);

        this.setState({
            likes: myLikes
        })

    }
    render(){
        const {posts} = this.props;
        return (
            <div>
                {posts.map((post, i) => (

                    <Paper key={post.id} style={Styles.myPaper}>
                             {this.getLikes(post.Likes)}
                    {/* {...post} prevents us from writing all of the properties out */}
                        <PostItem  
                             myLikes={this.state.likes}                 
                             myTitle={this.state.title} 
                             editChange={this.onChange} 
                             editForm={this.formEditing} 
                             isEditing={this.props.isEditingId === post.id} 
                             removePost={this.removePost} 
                             {...post} 
                        />
                    </Paper>
                ))}
            </div>
        )
    }
}

Answer 1

错误超出最大更新深度错误，因为您在setState中调用render()而不应该发生（请看here和here）

您致电{this.getLikes(post.Likes)}，后者依次致电setState

如果在渲染过程中需要计算Likes，请执行以下操作

 getLikes = (count) =>  {
    const myLikes = // Calculate likes

    return myLikes;

}

您的render()函数可能看起来像这样

render(){
    const {posts} = this.props;
    return (
        <div>
            {posts.map((post, i) => (

                <Paper key={post.id} style={Styles.myPaper}>

                {/* {...post} prevents us from writing all of the properties out */}
                    <PostItem  
                         myLikes={this.getLikes(post.Likes)}                 
                         myTitle={this.state.title} 
                         editChange={this.onChange} 
                         editForm={this.formEditing} 
                         isEditing={this.props.isEditingId === post.id} 
                         removePost={this.removePost} 
                         {...post} 
                    />
                </Paper>
            ))}
        </div>
    )
}

请注意，以上代码未经测试，请使用它作为提示。还请注意@Jaromanda X关于喜欢计算的评论。 forEach不返回值，因此您的getLikes不正确。

在React Return语句中调用函数的方式

1 个答案: