useSubmit提交了错误的参数

Question

每次更改输入时，我都会尝试提交。

当我试图更改输入时，我的submit工作，但将params更改为这个看起来很奇怪的字符串："http://localhost:3000/items?0=G&1＝r&2＝e&3＝e&4＝n&5＝+&6＝D&7＝j&8＝i&9＝n&10＝n〃；

这是代码

export async function action({ request }) {
const body = await request.formData();
}
export const loader: LoaderFunction = async ({ request }) => {
const url = new URL(request.url);
const term = url.searchParams.get('sellers');
console.log('term:', term);
const data: LoaderData = {
itemList: await db.item.findMany({
where: {
seller: term,
},
select: {
seller: true,
price: true,
},
}),
};
return json(data);
};
type LoaderData = {
itemList: Array<Item>;
};
export default function ItemsRouteIndex() {
const submit = useSubmit();
const { itemList } = useLoaderData<LoaderData>();
function handleChange(e) {
console.log('e:', e);
submit(e, { method: 'get', action: '/items' });
}
return (
<Form onChange={(e) => handleChange(e.target.value)}>
<select name='sellers'>
<option value='Blue Djinn'>Blue Djinn</option>
<option value='Green Djinn'>Green Djinn</option>
</select>
<button type='submit'>Search</button>
</Form>
);
}

Answer 1

问题是我试图提交事件的值，而不是事件表单。

修复方法如下：

<Form onChange={(e) => handleChange(e.target.form)}>
<select name='sellers'>
<option value='Blue Djinn'>Blue Djinn</option>
<option value='Green Djinn'>Green Djinn</option>
</select>
</Form>