React中useState初始化props为undefined 无法修改TextField值问题

你遇到的两个异常本质是同一个问题导致的：

• 你用const [textInput, setTextInput] = useState(note)初始化状态时，useState的初始值仅在组件第一次挂载时生效。从你的控制台日志能看出来，组件第一次渲染时父组件传入的note本身就是undefined（大概率是父组件异步拉取contact数据，第一次渲染还没拿到返回值），所以textInput初始值被设为undefined；等第二次渲染note拿到真实值的时候，内部state不会自动同步更新，所以输入框一直显示初始的undefined。
• 直接把note props绑定给输入框value时，因为React中props是只读的，你输入时调用的setTextInput改的是内部state，没有修改props里的note值，所以输入框内容自然不会变化。
• 你看到的组件触发两次渲染是React开发环境下严格模式（StrictMode）的默认行为，属于正常现象，不是导致问题的原因。

根据你的状态维护位置选对应方案即可：

方案1：子组件维护输入状态（适合输入值仅在子组件暂存，提交时才回传的场景） #

用useEffect监听props中note的变化，异步拿到note值后同步到内部state，注意加判断避免循环渲染、输入光标跳位问题：

export default function ProfileNote({ contact }) {
  const { note, id } = contact;
  // 初始值给空字符串兜底，避免undefined导致输入框异常
  const [textInput, setTextInput] = useState(note ?? '');
  
  // 异步拿到note后同步状态
  useEffect(() => {
    if (note !== undefined && note !== textInput) {
      setTextInput(note);
    }
  }, [note]);

  const handleTextInputChange = event => {
    setTextInput(event.target.value);
  };

  const onSubmit = () => {
    // 提交逻辑取最新的textInput，和id一起上传即可
  }

  return (
    <FormProvider onSubmit={handleSubmit(onSubmit)}>
       <TextField
         name="notes"
         label="Notes"
         onChange={handleTextInputChange}
         value={textInput}
       />
    </FormProvider>
  );
}

方案2：父组件维护note状态（推荐，适合多组件共享note值的场景） #

不要在子组件创建重复的内部state，直接把note的更新方法从父组件传入，做标准的受控组件，从根源避免状态不同步问题：

// 父组件示例
function Parent() {
  const [contact, setContact] = useState({id: '', note: ''});
  // 异步拉取contact数据逻辑
  useEffect(() => {
    fetchContact().then(res => setContact(res))
  }, [])
  // 传给子组件的note更新方法
  const handleNoteChange = (newNote) => {
    setContact(prev => ({...prev, note: newNote}))
  }
  return <ProfileNote contact={contact} onNoteChange={handleNoteChange} />
}

// 子组件修改后
export default function ProfileNote({ contact, onNoteChange }) {
  const { note, id } = contact;
  const handleTextInputChange = event => {
    onNoteChange(event.target.value);
  };

  const onSubmit = () => {
    // 提交逻辑直接取contact.note即可
  }

  return (
    <FormProvider onSubmit={handleSubmit(onSubmit)}>
       <TextField
         name="notes"
         label="Notes"
         onChange={handleTextInputChange}
         value={note ?? ''}
       />
    </FormProvider>
  );
}

你之前用useEffect没解决问题，通常是依赖项漏写note，或者没有加值的判断导致更新逻辑不触发/死循环。

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