React中react-comments-section组件currentUser传值不生效问题

使用第三方组件库react-comments-section时，给CommentSection组件配置currentUser属性，将父组件传入的user参数的currentUserFullName字段赋值给配置项的同名属性，写法为currentUserFullName: user.currentUserFullName，但发布评论时该值未被正常设置。

已完成的验证项：

• 页面中直接渲染<h1>{user.currentUserFullName}</h1>可正常输出对应内容
• 给组件传入commentData={comments}时，评论数据加载功能运行正常

相关业务代码如下：

import { CommentSection } from 'react-comments-section';
import 'react-comments-section/dist/index.css';

function Comments({comments,user}){

  return (
    <div>
      <h1>{user.currentUserFullName}</h1>
      
      <CommentSection
        currentUser={{
          currentUserId: '213',
          currentUserImg:
            'https://ui-avatars.com/api/name=Riya&background=random',
          currentUserProfile:
            'https://www.linkedin.com/in/',
          currentUserFullName: user.currentUserFullName
        }}
        logIn={{
          loginLink: 'http://localhost:3001/',
          signupLink: 'http://localhost:3001/'
        }}

        overlayStyle={{ 
            width: '70%',
            margin: 'auto'
        }}

        comment-titleStyle={{
            fontFamily: "Gill Sans"
        }}
        
        commentData={comments}
        
        onSubmitAction={(data) => {
            console.log('parent comment, ', data)
          }}

        onReplyAction={(data) => {
            console.log('reply comment, ', data)
          }}

        currentData={(data) => {
          console.log('curent data', data)
          console.log('user here', user)
        }}
      />
    </div>
    
  );
}

export default Comments;

• 组件挂载时序问题
  这类带内部状态的第三方组件大多在首次挂载时就会缓存currentUser配置，如果父组件传入的user是接口异步返回的，组件首次挂载时user.currentUserFullName还为undefined，后续user更新时组件内部没有做currentUser属性的变更监听，就会一直沿用初始的空值。
  验证方式：查看currentData回调的打印结果，如果回调首次触发时user.currentUserFullName为空，后续才拿到有效值，即可确认是该问题。
  解决方式：等用户信息加载完成后再渲染评论组件，或者给组件加绑定用户标识的key，强制用户信息变更时组件重挂载，参考写法：

  // 等用户名存在后再渲染组件，同时用用户名做key保证更新时重挂载
  {user?.currentUserFullName && (
    <CommentSection
      key={user.currentUserFullName}
      // 其余原有配置保持不变
    />
  )}
  

• 字段类型不匹配问题
  确认传入的currentUserFullName为字符串类型，部分组件内部会对用户名字段做类型校验，若传入值为数字、null、对象等非字符串类型，即使能在h1标签正常渲染，也可能被组件内部校验拦截置空。可以在传入前主动做类型转换：

  currentUserFullName: String(user.currentUserFullName ?? '')
  

• 组件版本bug
  部分旧版本的react-comments-section存在currentUser属性更新不同步内部状态的已知问题，可升级组件到最新稳定版后重试验证。

内容的提问来源于stack exchange，提问作者Zarif