React输入框：value不可编辑、defaultValue切换行不更新问题求助

我来帮你搞定这个问题！你遇到的其实是React受控组件和状态同步的典型问题，咱们一步步拆解解决：

问题根源分析 #

• 当你用value={getTitle()}时，输入框直接绑定了Redux store里的选中电影标题，本地的title状态和store值完全脱节：你输入时setTitle更新了本地状态，但输入框显示的始终是store返回的值，自然编辑不了。
• 改用defaultValue后，它只是组件首次渲染时的初始值，后续Redux store里的选中电影变化时，非受控组件不会自动更新输入框的值，所以切换行后没反应。

解决方案：让本地状态与Redux store同步 #

核心思路是：用本地title状态作为输入框的受控值，同时监听Redux中选中电影的变化，自动同步更新本地状态。

修改你的MovieInput.tsx代码如下：

import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';

const MovieInput = () => {
  // 本地状态管理输入框的值
  const [title, setTitle] = useState('');
  // 从Redux获取当前选中的电影
  const selectedMovie = useSelector((state: any) => state.movies.item);

  // 监听选中电影的变化，同步更新本地title
  useEffect(() => {
    // 确保选中电影存在时才更新
    if (selectedMovie?.title) {
      setTitle(selectedMovie.title);
    }
  }, [selectedMovie]); // 依赖项设为selectedMovie，确保它变化时触发

  // 输入框变化时更新本地状态
  const titleHandleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(e.target.value);
  };

  return (
    <input 
      id="inputMovieTitle" 
      type="text" 
      onChange={titleHandleChange} 
      value={title} 
    />
  );
};

export default MovieInput;

关键细节说明 #

1. 移除getTitle()函数：直接通过useSelector获取选中电影，更简洁且避免不必要的调试日志（调试时可按需保留）。
2. useEffect同步状态：当Redux中选中的电影切换时，这个钩子会自动把本地title更新为新选中电影的标题，完美覆盖之前的编辑内容。
3. 受控组件保持可编辑：输入框始终绑定本地title状态，onChange实时更新状态，保证编辑功能正常。

另外请确认你的Redux action（getMovie）和reducer确实正确更新了state.movies.item，你之前的Grid.tsx里的selectMovie逻辑是没问题的，只要store能正确响应dispatch就行。

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