React组件非受控转受控警告是否重要？求解决方案

这个警告重要吗？ #

当然重要！这可不是无关紧要的提示——它直接违反了React对表单组件的核心设计规范。如果忽略它，你可能会遇到UI渲染不一致、表单数据丢失，甚至后续难以追踪的渲染bug，所以必须修复。

问题根源 #

咱们拆解下你的代码逻辑：

• 初始化state时，limit被设为null，第一次渲染时input的value={this.state.limit}等价于value={null}，React会把这种没有明确受控值的输入视为非受控组件。
• 当componentDidUpdate触发后，你通过setState给limit设置了来自Redux的具体分页值（per_page），这时候input突然变成了受控组件。
• React不允许组件在生命周期内随意切换受控/非受控状态，于是抛出了这个警告。

另外，你的componentDidUpdate还有个隐藏隐患：每次调用都会触发6次setState，而且没有判断props是否变化，会导致无限循环渲染，这也是必须优化的点！

修复步骤 #

1. 确保input从一开始就是受控组件

有两种简洁的解决方式：

• 方式一：初始化state时给limit设置合理默认值
  把state里的limit初始化为空字符串，或者业务上的默认分页值（比如10）：

  constructor(props){
      super(props)
      this.state={
          pagnation: true,
          firstPage: null,
          currentPage: null,
          lastPage:null,
          data:null,
          limit: '', // 或者设为业务默认值，比如10
      }
  }
  

• 方式二：在render中给value做兜底处理
  如果不想修改初始化逻辑，可以在input的value里添加判断，当limit为null时用空字符串替代：

  <input className={'text-center'} type={'text'} size={2} value={this.state.limit || ''}/>
  

2. 优化componentDidUpdate避免无限循环

把多次setState合并成一次，并且添加props变化的判断，防止无意义的重复更新：

componentDidUpdate(prevProps){
    // 只有当CurrentInventory props发生变化时才更新state
    if (prevProps.CurrentInventory !== this.props.CurrentInventory) {
        const inventory = this.props.CurrentInventory;
        this.setState({
            currentPage: inventory.current_page,
            firstPage: inventory.from,
            lastPage: inventory.last_page,
            data: inventory.data,
            total: inventory.total,
            limit: inventory.per_page
        });
    }
}

这样修改后，既解决了受控/非受控切换的警告，又避免了不必要的重复渲染，代码逻辑也更高效清晰。

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