React componentDidUpdate同步props后受控输入框无法编辑删除问题

出现输入框无法编辑、内容无法删除的核心原因是componentDidUpdate逻辑和render阶段的实例属性赋值形成了更新死循环，手动输入的内容会被立刻覆盖：

• 你将this.search、this.deposits的赋值逻辑写在render方法中，每次组件重渲染都会重新给这两个实例属性赋值，无差别触发后续的更新判断
• componentDidUpdate没有做props变更校验，只要组件触发任何更新（包括你手动输入触发的state更新），都会执行props值到state的强制同步
• 同步逻辑加了if (this.search.xxx && ...)的真值判断，当你清空输入框时，state值变为空字符串，此时props传入的search值还是原来的非空值，判断条件成立，会立刻把state改回props的旧值，表现为内容删不掉、输入无效

按照以下步骤调整代码即可恢复输入框的正常编辑能力：

• 移除render方法中对this实例属性的赋值，将deposits、search改为render内的局部常量，避免render阶段修改实例属性干扰更新判断
• 给componentDidUpdate增加前置的props变更校验，仅当props传入的search值本身发生变化时，才执行props到state的同步逻辑，用户手动输入触发的state更新不要做强制覆盖
• 移除同步逻辑中对props值的真值判断，避免空值同步失效、清空输入框被覆盖的问题
• 确保state中nid/cif/deposit三个字段初始值为空字符串，避免受控/非受控组件切换的警告

componentDidUpdate 逻辑 #

componentDidUpdate(prevProps) {
  // 分别取上一次和当前的props search值
  const prevSearch = prevProps.permissions.search || {};
  const currentSearch = this.props.permissions.search || {};

  // 仅当props对应字段变化时才同步到state
  if (prevSearch.nid !== currentSearch.nid) {
    this.setState(prevState => ({...prevState, nid: currentSearch.nid ?? ''}));
  }
  if (prevSearch.cif !== currentSearch.cif) {
    this.setState(prevState => ({...prevState, cif: currentSearch.cif ?? ''}));
  }
  if (prevSearch.deposit !== currentSearch.deposit) {
    this.setState(prevState => ({...prevState, deposit: currentSearch.deposit ?? ''}));
  }
}

render 方法调整 #

render() {
  // 改为render内局部常量，不要挂载到this实例
  const deposits = this.props.permissions.permissions ? this.props.permissions.permissions : this.props.permissions;
  const search = this.props.permissions.search ? this.props.permissions.search : {};
  const features = this.props.config.features;

  return (
    <div className='container'>
      {/* 其余JSX逻辑保持不变，将原代码中引用this.deposits、this.search的位置替换为上面的局部常量deposits、search即可 */}
    </div>
  )
}

调整后，只有父组件主动修改传入的search props时，输入框的值才会被同步更新；用户手动输入、删除内容时不会触发强制覆盖，输入框可以正常编辑。

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