Tanstack Form 在与表单交互时不会导致重新渲染。因此，您可能会发现自己尝试使用表单或字段状态值但没有成功。
如果您想要访问响应式值，您需要使用两种方法之一来订阅它们：useStore 或 form.Subscribe 组件。
这些订阅的一些用途包括渲染最新的字段值、根据条件确定要渲染的内容，或在组件逻辑中使用字段值。
对于您想要"响应"触发器的情况，请查看监听器 API。
useStore 钩子非常适合当您需要在组件逻辑中访问表单值时使用。useStore 接受两个参数。首先是表单存储。其次是一个选择器，用于微调您希望订阅的表单部分。
const firstName = useStore(form.store, (state) => state.values.firstName)
const errors = useStore(form.store, (state) => state.errorMap)
const firstName = useStore(form.store, (state) => state.values.firstName)
const errors = useStore(form.store, (state) => state.errorMap)
您可以在选择器中访问表单状态的任何部分。
注意，useStore 会在订阅的值发生变化时导致整个组件重新渲染。
虽然可以省略选择器，但请抵制这种冲动，因为省略它会导致表单状态发生任何变化时都会产生许多不必要的重新渲染。
form.Subscribe 组件最适合当您需要在组件的 UI 中对某些内容做出反应时使用。例如，根据表单字段的值显示或隐藏 UI。
<form.Subscribe
selector={(state) => state.values.firstName}
children={(firstName) => (
<form.Field>
{(field) => (
<input
name="lastName"
value={field.state.lastName}
onChange={field.handleChange}
/>
)}
</form.Field>
)}
/>
<form.Subscribe
selector={(state) => state.values.firstName}
children={(firstName) => (
<form.Field>
{(field) => (
<input
name="lastName"
value={field.state.lastName}
onChange={field.handleChange}
/>
)}
</form.Field>
)}
/>
form.Subscribe 组件不会触发组件级别的重新渲染。每当订阅的值发生变化时，只有 form.Subscribe 组件会重新渲染。
选择使用 useStore 还是 form.Subscribe 主要归结为：如果它在 UI 中渲染，请选择 form.Subscribe 以获得其优化优势；如果您需要在逻辑中使用响应性，那么 useStore 是正确的选择。