React文本框传入空字符串时无法正确重渲染的问题

文本框组件代码 #

const [configAssessmentReason, setConfigAssessmentReason] = React.useState("");

<InputTextfield
  disabled={inputDisabled || inputDisabledNoAccess}
  label="Reasoning for Assessment"
  value={configAssessmentReason}
  textArea={true}
  onChange={(val) => setConfigAssessmentReason(val)}
/>

自定义Hook代码 #

const { initiative, isError, isLoading } = useFetchUniqueTableData(
  strategic_initiative_key,
  authToken,
  selectedArchive,
  { name: "strategic_initiative" }
);

数据设置逻辑 #

React.useEffect(() => {
  const fetchData = async () => {
    // ...其他逻辑
    const si = strategic_initiative[0];
    setConfigAssessmentReason(si.reasoning_assessment); // 此处设置值
    // ...其他逻辑
    setTimeout(() => {
      hideLoader();
    }, 1000);
  };
  fetchData();
}, [initiative, isError, isLoading, selectedArchive]);

问题描述 #

初始加载数据时，文本框值为""；加载归档数据时，文本框显示值"ABCDEFGHIJK"；重新选择原始数据时，文本框应恢复为""，但仍残留"ABCDEFGHIJK"的视觉片段，点击文本框或失焦后片段才消失。为何传入空字符串时文本框无法正确渲染？

1. 先确认数据是否正确 #

切换回原始数据时，si.reasoning_assessment可能不是空字符串，而是undefined或者其他值。可以在设置状态时做兜底处理，确保传入的是空字符串：

setConfigAssessmentReason(si?.reasoning_assessment || "");

这样不管后端返回的是undefined、null还是空字符串，最终状态都会被设置为""，避免组件接收到非预期值导致渲染异常。

2. 检查自定义InputTextfield组件的实现 #

如果InputTextfield内部维护了局部状态，没有同步外部传入的value变化，就会出现视觉残留。比如组件内部用了自己的useState，但只在初始化时取props的value，后续props更新时没同步。这种情况要改成完全受控组件，或者添加监听同步逻辑：

// InputTextfield内部示例修正
const InputTextfield = ({ value, onChange, ...rest }) => {
  const [localValue, setLocalValue] = React.useState(value);
  
  // 监听外部value变化，同步局部状态
  React.useEffect(() => {
    setLocalValue(value);
  }, [value]);

  return (
    <textarea
      value={localValue}
      onChange={(e) => onChange(e.target.value)}
      {...rest}
    />
  );
};

3. 强制组件重置 #

如果组件内部逻辑太复杂不好排查，可以给InputTextfield加一个与切换状态绑定的key。当selectedArchive变化时，key改变会让React重新创建组件实例，彻底重置内部状态：

<InputTextfield
  key={selectedArchive} // 新增key属性
  disabled={inputDisabled || inputDisabledNoAccess}
  label="Reasoning for Assessment"
  value={configAssessmentReason}
  textArea={true}
  onChange={(val) => setConfigAssessmentReason(val)}
/>

4. 验证Effect的执行时机 #

在setConfigAssessmentReason前添加日志，确认切换回原始数据时，这个函数确实被调用，且传入的值是""：

console.log("设置的值：", si.reasoning_assessment);
setConfigAssessmentReason(si?.reasoning_assessment || "");

如果日志显示值不对，那就要排查fetchData里的数据获取逻辑，确认原始数据的reasoning_assessment字段是否正确。

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