React中修改Input文本值报错，求问题原因及解决方案

嘿，别担心基础问题，大家都是这么过来的😉

你遇到的这个报错，核心原因是JavaScript/TypeScript的语法规则不允许在可选属性访问（?.）的左侧进行赋值操作。text.current?.value里的?.表示text.current可能是null或undefined，如果直接在后面赋值，当current确实是null时，这个赋值操作就没有意义了，所以语法上直接禁止了这种写法。

修复方案 #

你只需要先确保text.current存在，再进行赋值操作就行，把代码改成这样：

const contactContext = useContext(ContactContext);
const text = useRef<HTMLInputElement>(null);
const { filterContacts, clearFilter, filtered } = contactContext;

useEffect(() => {
  // 先判断current不为null，再赋值
  if (filtered === null && text.current) {
    text.current.value = '';
  }
}, [filtered]); // 记得加上依赖数组，只有filtered变化时才触发

额外优化说明 #

原来的useEffect没有添加依赖数组，会导致组件每次渲染都执行这个逻辑，加上[filtered]作为依赖后，只有当filtered的值发生变化时，才会触发这个副作用，性能更优，也符合React的最佳实践。

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