我正在使用remix.run构建我的应用程序。我有一个组件的路由，该组件具有一个加载器函数，用于在加载组件时加载数据。该组件还具有一个嵌套在其中的表单，该表单需要验证，因此需要一个操作函数。因此，该组件同时具有useLoaderData（）和冲突的useActionData（）您有什么想法可以克服这个问题，而不需要将表单提交给非路由组件，也不需要使用会话和重定向？
5gfr0r5j1#
也许你可以尝试在你的组件中使用useEffect和useState钩子。在useEffect钩子中，你可以调用useLoaderData函数来加载数据，在useState钩子中，你可以存储表单数据和action函数。
const [formData, setFormData] = useState({}); const [error, setError] = useState(null); useEffect(() => { useLoaderData(); }, []); const handleSubmit = async () => { setError(null); try { await useActionData(formData); } catch (err) { setError(err.message); } }; return ( <> {error && <p>{error}</p>} <form onSubmit={handleSubmit}> {/* your form inputs */} <button type="submit">Submit</button> </form> </> );
1条答案
按热度按时间5gfr0r5j1#
也许你可以尝试在你的组件中使用useEffect和useState钩子。在useEffect钩子中，你可以调用useLoaderData函数来加载数据，在useState钩子中，你可以存储表单数据和action函数。