在React中，受控组件是由React控制值的输入组件。而不受控制的输入组件的值由DOM节点自己控制。 当我们尝试将受控组件更改为非受控组件时，就会出现不可变性问题。

出现此问题的原因是代码中的受控组件的值被通过props传入，并且我们尝试从外部更改它的值。要解决这个问题，我们需要确保不要从外部控制受控组件的值，并在组件内部进行管理。

以下是一个示例代码，说明如何解决此问题：

import React, { useState } from 'react';

function Input(props) {
  const [value, setValue] = useState(props.value);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    
  );
}

function App() {
  const [value, setValue] = useState('initial value');

  const handleClick = () => {
    setValue('new value');
  };

  return (
    

      
      Change Value
    
  );
}

在此示例中，我们将Input组件中的value状态用于管理值。 我们从父组件将值传递给子组件，而不是通过props更改它。 点击'Change Value”按钮将更新父组件中的值，并将其作为新的props传递给子组件Input。

这种方法可以避免出现不可变性问题，并对输入组件的值进行更好的管理。