使用useRef而非useState后按钮无法显示当前ref值，如何解决？

• useRef的current属性变更不会触发组件重渲染：React组件的UI更新由状态（useState/useReducer）变化驱动，useRef仅用于存储可变值，修改它不会通知React更新DOM。你修改data.current = category后，组件没有重新渲染，所以按钮文本始终停留在初始状态。

推荐方案：改用useState #

这是最贴合React设计逻辑的做法，状态更新会自动触发组件重渲染，同步更新UI：

const [data, setData] = useState<Categories | null>(null);

const handlePressCategory = (category: Categories) => {
  setData(category);
  modalCategoriesRef.current?.close();
}

<Pressable style={[ButtonStyles.full_without, s.btn]} onPress={handleOpenModalCategories}>
  <Text style={s.btnText}>{ data === null ? 'Kategorie auswählen' : data}</Text>
</Pressable>

备选方案：用useRef+手动触发重渲染（不推荐） #

如果因特殊场景必须使用useRef，可以额外添加一个状态变量强制触发重渲染：

const data = useRef<Categories | null>(null);
const [, forceRender] = useState({});

const handlePressCategory = (category: Categories) => {
  data.current = category;
  forceRender({}); // 通过更新状态触发组件重渲染
  modalCategoriesRef.current?.close();
}

<Pressable style={[ButtonStyles.full_without, s.btn]} onPress={handleOpenModalCategories}>
  <Text style={s.btnText}>{ data.current === null ? 'Kategorie auswählen' : data.current}</Text>
</Pressable>

这种方式会增加代码复杂度，且不符合React的状态管理范式，仅建议在特殊场景下临时使用。

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