React onclick 在组件加载时触发

Question

I am listing posts on map function. I created a button element and added onclick but on component loading triggering onclick function.

Postlist.js:

        const createPostElement = (data, index) => (
        <article className={'neokudum-postItem d-flex flex-row'} key={index}>
            <div className={'postItem-UserInfoBox d-flex flex-column'}>
                <div className={'postItem-Content'}>
                    <p>{data.postContent}</p>
                    {data.uploadedContent === 'null' ? '' : <LazyLoadImage className={'timeline-Image'} src={API_BASE + data.uploadedContent} effect={'blur'} /> }
                </div>
                <div className={'postItem-Actions'}>
                    <div className="d-flex flex-wrap mt-3">
                        <div className="p-2 postItem-Flex-Action">
                            <button className={'clearBtn'} onClick={this.props.likePost(5)}>
                                <Icon.Heart stroke={'#525f7f'} />
                                <span>0</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    );

    const postList = (
        <div className={'neokudum-PostList'}>
            {
                this.props.posts.postList.map((post, index) =>
                    {createPostElement(post, index)}
                )
            }
        </div>
    );

output: image1

I didn't press button but likePost function loading on component render

Answer 1

Convert to like this:

<button className={'clearBtn'} onClick={() => this.props.likePost(5)}> // at here
     <Icon.Heart stroke={'#525f7f'} />
     <span>0</span>
</button>

Answer 2

You're assigning the result of calling likePost to the onClick property.

onClick={this.props.likePost(5)}

should be

onClick={() => this.props.likePost(5)}

so that you assign an actual function instead.